easyUI-datagrid 翻页控制代码

来源：互联网发布：haskell人工智能编辑：程序博客网时间：2024/04/29 21:43

在使用easyUI-datagrid ，设置pagination:true时在DataGrid控件底部显示分页工具栏，但是分页并没有实际实现，页面展示的数据仍是所有数据。

使用时添加下面的方法即可：

function showdetail(mydata){$('#gridtablename').datagrid('loadData', mydata.slice(0,8));  // fix all columns size         var pager = $("#gridtablename").datagrid("getPager");          pager.pagination({                  showPageList:false,           pageSize: 8,//每页显示的记录条数，默认为10         beforePageText: '第',//页数文本框前显示的汉字         afterPageText: '页    共 {pages} 页',         displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条记录',            total:mydata.length,              onSelectPage:function (pageNo, pageSize) {                  var start = (pageNo - 1) * pageSize;                  var end = start + pageSize;                  $("#gridtablename").datagrid("loadData", mydata.slice(start, end));                  pager.pagination('refresh', {                      total:mydata.length,                      pageNumber:pageNo                  });              }        });}

说明：在你返回的数据处调用该方法，mydata即为返回JSON格式数据。其中三处 gridtablename 为实际 datagrid 表的id.

返回的数据格式为一下格式：

[ {"ID":80013,"A0001":"测试数据1","PROV":"吉林","CITY":"长春"}, {"ID":80014,"A0002":"测试数据2","PROV":"吉林","CITY":"长春"}]

不需要拼接 total，rows字段。

0 0