<!DOCTYPE html>

 <html>

 <head>

     <meta charset="UTF-8">

     <title>客户端分页demo</title>

     <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/bootstrap/easyui.css">

     <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">

     <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css">

     <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery-1.8.0.min.js"></script>

     <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>

 </head>

 <body>

     <h2>客户端分页dem</h2>

     <div class="demo-info">

         <div class="demo-tip icon-tip"></div>

         <div></div>

     </div>

     <div style="margin:10px 0;"></div>

     <table id="dg" title="Client Side Pagination" style="width:700px;height:300px" data-options="

                 rownumbers:true,

                 singleSelect:true,

                 autoRowHeight:false,

                 pagination:true,

                 pageSize:10">

         <thead>

             <tr>

                 <th field="inv" width="80">Inv No</th>

                 <th field="date" width="100">Date</th>

                 <th field="name" width="80">Name</th>

                 <th field="amount" width="80" align="right">Amount</th>

                 <th field="price" width="80" align="right">Price</th>

                 <th field="cost" width="100" align="right">Cost</th>

                 <th field="note" width="110">Note</th>

             </tr>

         </thead>

     </table>

     <script>

         function getData(){//模拟数据

             var rows = [];

             for(var i=1; i<=80000; i++){

                 var amount = Math.floor(Math.random()*1000);

                 var price = Math.floor(Math.random()*1000);

                 rows.push({

                     inv: 'Inv No '+i,

                     date: $.fn.datebox.defaults.formatter(new Date()),

                     name: 'Name '+i,

                     amount: amount,

                     price: price,

                     cost: amount*price,

                     note: 'Note '+i

                 });

             }

             //console.log(JSON.stringify(rows));

             return rows;

         }

         function pagerFilter(data){

             if (typeof data.length == 'number' && typeof data.splice == 'function'){    // 判断数据是否是数组

                 data = {

                     total: data.length,

                     rows: data

                 }

             }

             var dg = $(this);

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

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

             pager.pagination({

                 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(){//加载数据

             $('#dg').datagrid({loadFilter:pagerFilter}).datagrid('loadData', getData());

         });

     </script>

 </body>

 </html>

 先上图 数据是随机生成的，前端分页是直接把数据库的数据一次性拿出来进行分页，而后端是你要多少数据我再取出来给你分页，不是一次性的，前端分页也叫假分页。直接复制的时候记得在最后改下你的table ID

easyui 前端实现分页 复制就能用的更多相关文章

  1. easyUI datagrid 前端真分页

    前文再续,书接上一回.easyUI datagrid 前端假分页 http://blog.csdn.net/leftfist/article/details/43164977 真分页是easyUI d ...

  2. 【原】EasyUI ComboGrid 集成分页、按键示例

    需求: 1.下拉框下拉时出现表格: 2.表格带分页功能: 3.可以使用向上键.向下键在表格中移动选择行数据: 4.可以使用回车键在表格中选中行数据: 5.在下拉框的文本框中输入内容,能查询表格: 6. ...

  3. EasyUI的datagrid分页

    EasyUI的datagrid分页 前台代码: <script type="text/javascript"> $(function () { //查询 search( ...

  4. CDN中前端层的复制

    前端层的复制是为了提高静态内容分发的性能和可扩展性.将静态内容的分发转由边缘服务器来完成是为了解决可扩展性的问题,因为这样做可以避免出现在对等点和广域网链路处的网络拥堵风险,而这两个地方的拥堵是网络延 ...

  5. easy-ui treegrid 实现分页 并且添加自定义checkbox

    首先第一点easy-ui  treegrid 对分页没有好的实现, 因为在分页的过程中是按照 根节点来分页的  后台只能先按照 根节点做分页查询  再将子节点关联进去, 这样才能将treegrid 按 ...

  6. easyui的datagrid分页写法小结

    easyui的datagrid分页死活不起作用...沙雕了...不说了上代码 //关闭tab1打开tab2 查询Detail function refundDetail(){ $('#tt').tab ...

  7. 第二百零九节，jQuery EasyUI，Pagination(分页)组件

    jQuery EasyUI,Pagination(分页)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Pagination(分页)组件的使 ...

  8. easyUI datagrid 前端假分页

    datagrid有两种分页方式,真分页和假分页. 所谓真分页,就是真的每次只获取一张分页的数据. 所谓假分页,就是将所有数据全部获取下来,然后利用其分页控件进行分页. 下面具体说说假分页: 1.dat ...

  9. easyui 前端分页及前端查询

    1.静态分页核心方法 // 前端分页 -- 将datagrid的loadFilter属性设置为这个方法名即可 function partPurchasePagerFilter(data) { if ( ...

随机推荐

  1. 【Git 四】一款不错的 Git 客户端

    平常做开发使用 git bash 进行代码提交,一直没有使用过 git 相关的客户端. 直到有次同一分支下两个日志进行代码比较时,bash 返回的结果可视化理解起来比较差. 如果更改的部分比较多,问题 ...

  2. 学习Go语言之模板方法模式

    模板方法模式结构图如下.原理是过程实现不一样,但是执行的顺序是按照模板固定好了的.即简单理解为都有1,2,3步骤,但是每一步的实现交由具体实现类不同实现. 1.过程式编程 // 模板方法模式 pack ...

  3. 企业级Nginx+Keepalived集群实战（双主架构）

    随着Nginx在国内的发展潮流,越来越多的互联网公司都在使用Nginx,Nginx高性能.稳定性成为IT人士青睐的HTTP和反向代理服务器.Nginx负载均衡一般位于整个网站架构的最前端或者中间层,如 ...

  4. Spring EL表达式和资源调用

    Spring EL表达式     Spring EL-Spring表达式语言,支持在xml和注解中使用表达式,类似于在jsp的EL表达式语言.     Spring 开发中经常涉及调用各种资源的情况, ...

  5. POJ 3869 Headshot

    Headshot Time Limit: 1000ms Memory Limit: 65536KB This problem will be judged on PKU. Original ID: 3 ...

  6. 【转】 基于C#.NET的高端智能化网络爬虫

    [转] 基于C#.NET的高端智能化网络爬虫 前两天朋友发给我了一篇文章,是携程网反爬虫组的技术经理写的,大概讲的是如何用他的超高智商通过(挑衅.怜悯.嘲讽.猥琐)的方式来完美碾压爬虫开发者.今天我就 ...

  7. vue6 发请求

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. ddr sdram self-refresh & auto-refresh

    以下是EDD5116AFTA数据手册的摘录.不过看过了还是不太明白二者的区别. self-refresh:Self-refresh entry [SELF]This command starts se ...

  9. 25.怎样在IDEA中使用JUnit4和JUnitGenerator V2.0自动生成测试模块

    转自:https://blog.csdn.net/wangyj1992/article/details/78387728 因为项目的需要,所以研究了一下自动生成测试代码.将经验记录下来,总会有用的.我 ...

  10. 85.explicit作用

    #include <iostream> using namespace std; class myclass { public: int num; public: explicit myc ...