EasyUI下datagrid的AJAX真分页
HTML代码:这里pageList必须要包含pageSize,要不然会报错,默认状态下好像不会,最好还是详细的定义一下
<table id="tblVideoSearch" height="585px" title="111" class="easyui-datagrid" data-options="rownumbers:true,singleSelect:true,autoRowHeight:false,pagination:true,pageNumber:1,pageSize:20,pageList:[10,20,30],remoteSort:false"> <thead> <tr> <th align="center" field="streamNumber" width="20%">列名1 </th> <th align="center" field="checkAreaNo" width="20%">列名2 </th> <th align="center" field="checkPerson" width="20%">列名3 </th> <th align="center" field="carIdentificationNumber" width="20%">列名4 </th> <th align="center" field="preview" width="10%" data-options="formatter:rowformater">预览 </th> </tr> </thead> </table>
JavaScript代码(查询事件方法):
function queryPreviewVideoInfo(pageIndex,pageSize) { //查询条件 var streamNumber = $('#streamNumber').textbox('getValue'); //查询条件 var carIdentificationNumber = $('#carIdentificationNumber').textbox('getValue'); //查询条件 var checkPerson = $('#checkPerson').textbox('getValue'); //查询条件 var checkAreaNo = $('#checkAreaNo').textbox('getValue'); //查询条件 var searchStarTime = $('#searchStarTime').datebox('getValue'); //查询条件 var searchEndTime = $('#searchEndTime').datebox('getValue'); //Ajax请求 $.ajax({ url: "Ajax.aspx", type: 'post', data: { option: "QueryPreviewVideoInfo", streamNumber: streamNumber, carIdentificationNumber: carIdentificationNumber, checkPerson:checkPerson, checkAreaNo:checkAreaNo, searchStarTime:searchStarTime, searchEndTime: searchEndTime, pageSize: pageSize, pageIndex:pageIndex }, dataType: 'json', timeout: 10000, //返回json格式的数据,这个自定义。 success: function (res, status) { if (res.code === "1") { $("#tblVideoSearch").datagrid({ data: res.PreviewVideoInfo, nowrap: true, singleSelect: true }); var pager = $("#tblVideoSearch").datagrid("getPager"); //获取表格 pager.pagination({ onSelectPage: function (pageIndex, pageSize) { //翻页事件,pageIndex和pageSize均为翻页后的返回值 queryPreviewVideoInfo(pageIndex, pageSize); //设置翻页后显示的当前页数 $("#tblVideoSearch").datagrid({ pageNumber: pageIndex }); }, onChangePageSize: function (pageSize) {//表格左下角,调整每页大小事件 queryPreviewVideoInfo(1,pageSize); //初始化表格页数和每页大小 $("#tblVideoSearch").datagrid({ pageNumber: 1,pageSize:pageSize }); } }); } else { alert(res.value); } }, fail: function (err, status) { alert(err); } }); } });
其中“预览”列每行显示预览连接的JavaScript代码:
function rowformater(value, row, index) { return "<a class='reviewButton' href=111.aspx?i=" + row.streamNumber + " target='_blank'>预览</a>"; }
搜索按钮点击事件JavaScript代码:
$('#btnsearch').click(function () { //需要点击时,重新定义其页码和大小,要不然多次点击搜索时行号会乱掉 $("#tblVideoSearch").datagrid({ pageNumber: 1, pageSize: 20 }); queryPreviewVideoInfo(1, 20); });