EasyUi 分页 和 表格数据加载
这里说明的是将说有数据先返回到前端再由前端去分页，性能可能没有先在后台分好页再返回给前端高
但如果操作不涉及大数据的话也没什么大问题，具体问题具体分析
要使用分页控件首先要声明初始化一下：
1 //设置分页控件 2 var p = $("#tt").datagrid('getPager'); //tt为表格id 3 $(p).pagination({ 4 // pageSize: 10,//每页显示的记录条数，默认为10 5 pageList: [5,10,15],//可以设置每页记录条数的列表 6 beforePageText: '第',//页数文本框前显示的汉字 7 afterPageText: '页 共 {pages} 页', 8 displayMsg: '当前显示 {from} - {to} 条记录 共 {total} 条记录', 9 });
然后是前端的分页代码（网上的）：
1 function pagerFilter(data){ 2 if (typeof data.length == 'number' && typeof data.splice == 'function'){ // is array 3 data = { 4 total: data.length, 5 rows: data 6 } 7 } 8 var dg = $(this); 9 var opts = dg.datagrid('options'); 10 var pager = dg.datagrid('getPager'); 11 pager.pagination({ 12 //pageSize: 10,//每页显示的记录条数，默认为10 //这里不设置的画分页页数选择函数会正确调用，否则每次点击下一页 13 pageList: [5,10,15],//可以设置每页记录条数的列表 //pageSize都会变回设置的值 14 beforePageText: '第',//页数文本框前显示的汉字 15 afterPageText: '页 共 {pages} 页', 16 displayMsg: '当前显示 {from} - {to} 条记录 共 {total} 条记录', 17 onChangePageSize:function(){ 18 }, 19 onSelectPage:function(pageNum, pageSize){ 20 opts.pageNumber = pageNum; 21 opts.pageSize = pageSize; 22 pager.pagination('refresh',{ 23 pageNumber:pageNum, 24 pageSize:pageSize 25 }); 26 dg.datagrid('loadData',data); 27 } 28 }); 29 if (!data.originalRows){ 30 data.originalRows = (data.rows); 31 } 32 var start = (opts.pageNumber-1)*parseInt(opts.pageSize); 33 var end = start + parseInt(opts.pageSize); 34 data.rows = (data.originalRows.slice(start, end)); 35 return data; 36 }
1 function doSearch(){ 2 userName = $("#itemid").val(); 3 roleName = $("#roleName").val(); 4 var urlRequest="/account/searchByUserName?userName="+userName+"&roleName=" + roleName; //相对路径请求 5 $.getJSON(urlRequest, null, function(json) { //get方法获取json数据，java代码之前写过一篇了 6 /* $(function(){ 7 ccb={total:json.length,rows:[json[0]]}; 8 $("#tt").datagrid('loadData', ccb); 9 alert('here'); 10 }); */ 11 ccb = { //Json数据继续封装 12 "total": json.length, 13 "rows": json 14 }; 15 $(function(){ 16 $('#tt').datagrid({loadFilter:pagerFilter}).datagrid('loadData', ccb); 17 }); 18 /* $("#tt").datagrid('loadData', { //加载数据类似上面的 19 "total": json.length, 20 "rows": json 21 }); */ 22 }); 23 }
Html代码顺便粘一下：
1 <body> 2 <div class="demo-info" style="margin-bottom:10px"> 3 <div class="demo-tip icon-tip"> </div> 4 <div>输入查询关键字，点击查询搜索</div> 5 </div> 6 7 <table id="tt" class="easyui-datagrid" style="width:1130px;height:540px" 8 title="Searching" iconCls="icon-search" toolbar="#tb" 9 rownumbers="true" pagination="true"> 10 <thead> 11 <tr> 12 <th field="userName" width="150">用户名</th> 13 <th field="roleName" width="150">角色名</th> 14 <th field="telphone" width=150" >电话</th> 15 <th field="email" width="150" >邮件</th> 16 <th field="sex" width="50">性别</th> 17 <th field="createtime" width="160" align="center">账户创建时间</th> 18 </tr> 19 </thead> 20 </table> 21 <div id="tb" style="padding:3px"> 22 <span>用户名:</span> 23 <input id="itemid" style="line-height:26px;border:1px solid #ccc" onkeydown='if(event.keyCode==13){doSearch();}'> 24 <span>角色名:</span> 25 <select id="roleName" style="line-height:26px;border:1px solid #ccc" onchange="doSelect();"> 26 <option value="all" >所有角色</option> 27 <option value="超级管理员">超级管理员</option> 28 <option value="管理员">管理员</option> 29 </select> 30 <a href="#" class="easyui-linkbutton" plain="true" onclick="doSearch()">查询</a> 31 </div> 32 </body>
