EasyUi 分页和表格数据加载

最新推荐文章于 2018-03-21 16:17:00 发布

aoan1126

最新推荐文章于 2018-03-21 16:17:00 发布

阅读量60

点赞数

原文链接：http://www.cnblogs.com/george-cw/p/4231236.html

版权

这里说明的是将说有数据先返回到前端再由前端去分页，性能可能没有先在后台分好页再返回给前端高

但如果操作不涉及大数据的话也没什么大问题，具体问题具体分析

要使用分页控件首先要声明初始化一下：

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">&nbsp;</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>

转载于:https://www.cnblogs.com/george-cw/p/4231236.html

aoan1126

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
EasyUi 分页和表格数据加载

这里说明的是将说有数据先返回到前端再由前端去分页，性能可能没有先在后台分好页再返回给前端高但如果操作不涉及大数据的话也没什么大问题，具体问题具体分析要使用分页控件首先要声明初始化一下：1 //设置分页控件 2 var p = $("#tt").datagrid('getPager'); //tt为表格id3 $(p).paginati...
复制链接

扫一扫