JQuery Easy-UI 实现动态分页

Easy-UI 通过datagrid函数实现分页：ajax传递pagesize与pagenumber给服务器，服务器根据请求参数查出一页数据，并通过JSON格式返回到页面，datagrid函数自动对JSON数据解析展示，请注意JSON格式一定要正确。

jquery-easyui/themes/default/easyui.css
jquery-easyui/themes/icon.css
jquery-easyui/jquery-1.6.min.js
jquery-easyui/jquery.easyui.min.js
jquery-easyui/jquery.json-2.4.js
jquery-easyui/json2.js
//使用datagrid实现动态分页
$(function(){ $('#dg').datagrid({  title: '信息列表',  width: 'auto',  height: 600,  nowrap: true,  striped: true,  collapsible:true,  border: true,   showFooter:true,  pagination:true,  rownumbers:false,  fitColumns:false,  pageSize:10,   pageList:[10,15,20,25,30,35,40,45,50,100],
 sortName:'flightCode',  frozenColumns:[[  {field:'ck',checkbox:true},  {field:'code',title:'航班号',width:80,hidden:true,sortable:true}  ]],   columns:[[  {field:'name',title:'名称',width:80,hidden:true}, 
 //注意formatter函数可以对显示值进行格式化处理，比如日期显示格式，函数自定义。  {field:'col4',title:'日期',hidden:true,width:120,formatter: function(value,row,index){return;}} ]],  onDblClickRow: function(index,value){  $('#dg').datagrid('selectRow',index);   },  onClickCell: function(index,field,value){  }, });  var p = $('#dg').datagrid('getPager');   $(p).pagination({   onSelectPage: function (pageNumber, pageSize) {   getData(pageNumber, pageSize);   },  onChangePageSize:function (pageNumber, pageSize) {   getData(pageNumber, pageSize);   },   onRefresh:function (pageNumber, pageSize) {   getData(pageNumber, pageSize);   }   }); }); var getData = function (pasenumber,pagesize) {   $.ajax({   type: 'POST',   url: queryPaginationURL, //用户请求数据的URL  data: "currentPageSize=" + pagesize + "&currentPageNumber=" + pasenumber,   error: function (XMLHttpRequest, textStatus, errorThrown) {   alert(textStatus);   },   success: function (data) {   $('#dg').datagrid('loadData', data);   }   });  }; //页面初始化时调用函数加载数据 $(function(){  getData(1,10); });  function refreshPage(){  getData(1, 10);   };
<table id="dg" class="easyui-datagrid" toolbar="#toolbar" singleSelect="true"> </table>

JSON数据格式

{  "total":239,  "rows":[  {"code":"001","name":"Name 1","addr":"Address 11","col4":"col4 data"},  {"code":"002","name":"Name 2","addr":"Address 13","col4":"col4 data"},
]  }