这里说明的是将说有数据先返回到前端再由前端去分页，性能可能没有先在后台分好页再返回给前端高
但如果操作不涉及大数据的话也没什么大问题，具体问题具体分析
要使用分页控件首先要声明初始化一下：
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>
时间： 2024-10-24 10:44:55