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

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

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

      //设置分页控件

      var p = $("#tt").datagrid('getPager'); //tt为表格id

      $(p).pagination({

        // pageSize: 10,//每页显示的记录条数，默认为10

        pageList: [5,10,15],//可以设置每页记录条数的列表

        beforePageText: '第',//页数文本框前显示的汉字

        afterPageText: '页    共 {pages} 页',

        displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条记录',

      });

然后是前端的分页代码（网上的）：

 function pagerFilter(data){

             if (typeof data.length == 'number' && typeof data.splice == 'function'){    // is array

                 data = {

                     total: data.length,

                     rows: data

                 }

             }

             var dg = $(this);

             var opts = dg.datagrid('options');

             var pager = dg.datagrid('getPager');

             pager.pagination({

                 //pageSize: 10,//每页显示的记录条数，默认为10        　　　　　　　　　　//这里不设置的画分页页数选择函数会正确调用，否则每次点击下一页

                 pageList: [5,10,15],//可以设置每页记录条数的列表 　　　　　　　　　　　　 //pageSize都会变回设置的值

                 beforePageText: '第',//页数文本框前显示的汉字

                 afterPageText: '页    共 {pages} 页',

                 displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条记录',

                 onChangePageSize:function(){

                  },

                 onSelectPage:function(pageNum, pageSize){

                     opts.pageNumber = pageNum;

                     opts.pageSize = pageSize;

                     pager.pagination('refresh',{

                         pageNumber:pageNum,

                         pageSize:pageSize

                     });

                     dg.datagrid('loadData',data);

                 }

             });

             if (!data.originalRows){

                 data.originalRows = (data.rows);

             }

             var start = (opts.pageNumber-1)*parseInt(opts.pageSize);

             var end = start + parseInt(opts.pageSize);

             data.rows = (data.originalRows.slice(start, end));

             return data;

         }
 function doSearch(){

         userName = $("#itemid").val();

         roleName = $("#roleName").val();

         var urlRequest="/account/searchByUserName?userName="+userName+"&roleName=" + roleName;　　//相对路径请求

         $.getJSON(urlRequest, null, function(json) {　　　　　　　　　　　　　　　　　　　　　　　　//get方法获取json数据，java代码之前写过一篇了

         /* $(function(){

         ccb={total:json.length,rows:[json[0]]};

         $("#tt").datagrid('loadData', ccb);

         alert('here');

         });  */

         ccb = {   　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//Json数据继续封装

             　　"total": json.length,

           　　　 "rows": json

         };

         $(function(){

             $('#tt').datagrid({loadFilter:pagerFilter}).datagrid('loadData', ccb);

         });

         /*  $("#tt").datagrid('loadData', {   　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 //加载数据类似上面的

         "total": json.length,

          "rows": json

          }); */

    });

         }

Html代码顺便粘一下：

 <body>

     <div class="demo-info" style="margin-bottom:10px">

         <div class="demo-tip icon-tip">&nbsp;</div>

         <div>输入查询关键字，点击查询搜索</div>

     </div>

     <table id="tt" class="easyui-datagrid" style="width:1130px;height:540px"

             title="Searching" iconCls="icon-search" toolbar="#tb"

             rownumbers="true" pagination="true">

         <thead>

             <tr>

                 <th field="userName" width="150">用户名</th>

                 <th field="roleName" width="150">角色名</th>

                 <th field="telphone" width=150" >电话</th>

                 <th field="email" width="150" >邮件</th>

                 <th field="sex" width="50">性别</th>

                 <th field="createtime" width="160" align="center">账户创建时间</th>

             </tr>

         </thead>

     </table>

     <div id="tb" style="padding:3px">

         <span>用户名:</span>

         <input id="itemid" style="line-height:26px;border:1px solid #ccc" onkeydown='if(event.keyCode==13){doSearch();}'>

         <span>角色名:</span>

         <select id="roleName"  style="line-height:26px;border:1px solid #ccc" onchange="doSelect();">

             <option value="all" >所有角色</option>

             <option value="超级管理员">超级管理员</option>

             <option value="管理员">管理员</option>

         </select>

         <a href="#" class="easyui-linkbutton" plain="true" onclick="doSearch()">查询</a>

     </div>

 </body>

EasyUi 分页 和 表格数据加载的更多相关文章

  1. jqgrid 分页时，清空原表格数据加载返回的新数据

    由于,我们是动态分页,分页后的数据是在触发分页后动态加载而来.如何使jqgrid清空原数据而加载新数据? 1)调用jqgrid的 clearGridData 方法清空表格数据 2)调用jqgrid的  ...

  2. jquery easyui 显示和关闭数据加载的遮罩

    $('#yearReportTable').datagrid('loading');//打开等待div $('#yearReportTable').datagrid('loaded');//关闭等待d ...

  3. [转载]再次谈谈easyui datagrid 的数据加载

    这篇文章只谈jQuery easyui datagrid 的数据加载,因为这也是大家谈论最多的内容.其实easyui datagrid加载数据只有两种方式:一种是ajax加载目标url返回的json数 ...

  4. 谈谈easyui datagrid 的数据加载(转)

    这篇文章只谈jQuery easyui datagrid 的数据加载,因为这也是大家谈论最多的内容.其实easyui datagrid加载数据只有两种方式:一种是ajax加载目标url返回的json数 ...

  5. 再次谈谈easyui datagrid 的数据加载

    from:http://www.easyui.info/archives/204.html 这篇文章只谈jQuery easyui datagrid 的数据加载,因为这也是大家谈论最多的内容.其实ea ...

  6. 谈谈easyui datagrid 的数据加载

    文章目录 1url方式加载数据 1.1调用方式 1.2相关方法 1.3二次加载问题 2加载本地数据方式 2.1调用方式 2.2如何分页 2.3加载中效果 2.4如何不统计总数 这篇文章只谈jQuery ...

  7. jQuery easyui datagrid 的数据加载

        其实easyuidatagrid加载数据只有两种方式:一种是ajax加载目标url返回的json数据:另一种是加载js对象,也就是使用loadDate方法,这种方法用于加载本地js数据(非ur ...

  8. Bootstrap Table表格一直加载(load)不了数据-解决办法

    bootstrap-table是一个基于Bootstrap风格的强大的表格插件神器,官网:http://bootstrap-table.wenzhixin.net.cn/zh-cn/ 这里列出遇到的一 ...

  9. hibernate框架学习第六天：QBC、分页查询、投影、数据加载策略、二级缓存

    QBC查询 1.简单查询 Criteria c = s.createCriteria(TeacherModel.class); 2.获取查询结果 多条:list 单挑:uniqueResult 3.分 ...

随机推荐

  1. profile

    项目开发中,使用git最为版本控制工具,往往会建立开发分支.测试分支和生产分支. 各个分支的数据库url,所依赖的接口url可能不同,直接配置的话,在合并分支时往往出现冲突.使用profile可以有效 ...

  2. ThinkPHP 3.2.3 关联模型的使用

    关于关联模型 ThinkPHP 3.2.3 的关联模型(手册地址)一般处理关联数据表的 CURD 操作,例如关联读取.关联写入.关联删除等. 实例 博客管理模块关于博客有 4 张数据表:博客表 crm ...

  3. lr并发量和迭代的区别

    1.并发量 并发量也就是同时运行的量.比如100个用户同时登录,那么并发量就是100.当然这100个用户可以进行参数化,也可以采用设置虚拟用户数(vuser). 2.迭代 迭代就是单个用户运行的次数. ...

  4. usb mass storage

    使用otg端口进行usb slave的测试,需要安装g_file_storage.ko或者g_mass_storage.ko模块. 参考链接 http://blog.csdn.net/freeman1 ...

  5. RabbitMQ学习总结 第三篇：工作队列Work Queue

    目录 RabbitMQ学习总结 第一篇:理论篇 RabbitMQ学习总结 第二篇:快速入门HelloWorld RabbitMQ学习总结 第三篇:工作队列Work Queue RabbitMQ学习总结 ...

  6. JavasSript实现秒转换为“天时分秒”控件和TDD测试方法应用

    背景 时间累计值,在顶层一般以秒为计算单位, 所以到页面上如果直接显示xx秒, 如果秒的值很大, 则用户得不到直观的感受, 到底有多长时间, 在日长生活中, 人们以天 时 分 秒为单位来记录时间累计值 ...

  7. 解决编译错误: 非法字符: '\ufeff' 解决方案|错误: 需要class, interface或enum

    http://www.cnblogs.com/oymx/p/5353235.html 可以 note++打开  在格式里  选择utf-8 无bom格式编码 即可

  8. Java:并行编程及同步使用方法

    知道java可以使用java.util.concurrent包下的 CountDownLatch ExecutorService Future Callable 实现并行编程,并在并行线程同步时,用起 ...

  9. JSP 和 Servlet 有哪些相同点和不同点，他们之间的联系是什么？

    JSP 和 Servlet 有哪些相同点和不同点,他们之间的联系是什么? 联系: JSP 是 Servlet 技术的扩展,本质上是 Servlet 的简易方式,更强调应用的外表表达. JSP编译后是& ...

  10. this 的工作原理

    JavaScript 有一套完全不同于其它语言的对 this 的处理机制. 在五种不同的情况下 ,this 指向的各不相同. 全局范围内 this; 当在全部范围内使用 this,它将会指向全局对象. ...