<!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. 51Nod 3的幂的和（扩展欧几里德求逆元）

    求:3^0 + 3^1 +...+ 3^(N) mod 1000000007 Input 输入一个数N(0 <= N <= 10^9) Output 输出:计算结果 Input示例 3 O ...

  2. AIX系统谨慎使用reboot命令

    在客户一次停机维护中,发现了这个问题. 环境是ORACLE 10G RAC for AIX6,使用了HACMP管理共享磁盘. 在停机维护时间段内需要重启主机,当关闭了数据库和CLUSTER后,节点1使 ...

  3. P3157 [CQOI2011]动态逆序对 CDQ分治

    一道CDQ分治模板题简单来说,这道题是三维数点对于离线的二维数点,我们再熟悉不过:利用坐标的单调递增性,先按更坐标排序,再按纵坐标排序更新和查询时都直接调用纵坐标.实际上,我们是通过排序将二维中的一维 ...

  4. vue的webpack打包

    一个完整的项目离不开 开发环境 生产环境 测试环境 这三个环境 首先解释一下这三个环境的含义 开发环境:开发环境是程序猿们专门用于开发的服务器,配置可以比较随意,为了开发调试方便,一般打开全部错误报告 ...

  5. Visual Studio2008 和2010 执行程序出现的黑框马上消失解决方法

    1 在程序最后加         system("PAUSE");  要注意包括头文件#include"stdlib.h"   //system须要调用这个   ...

  6. win32下实现透明窗体

    最開始写透明窗体的代码,在百度了之后,找到了SetLayeredWindowAttributes()这一个函数,可是因为网上案列的缺少,使得非常多人无法非常好的使用这一个方法,我花了几天的时间写了一个 ...

  7. Java 开源博客 —— Solo 0.6.8 正式版发布了！

    Java 开源博客 -- Solo 0.6.8 正式版发布了,欢迎大家下载.另外,欢迎观摩我们的另一个产品,在线 Golang IDE--Wide! 特性 基于标签的文章分类 博客/标签 Atom/R ...

  8. MySQL Server 5.5.44免安装版配置详解

    转载地址:http://wenku.baidu.com/view/2a8bfe6a25c52cc58bd6beff.html### 一 下载MySQL http://dev.mysql.com/dow ...

  9. OPENCV(3) —— 对XML和YAML文件实现I/O 操作

    XML\YAML文件在OpenCV中的数据结构为FileStorage string filename = "I.xml"; FileStorage fs(filename, Fi ...

  10. C#读写config配置文件--读取配置文件类

    一:通过Key访问Value的方法: //判断App.config配置文件中是否有Key(非null) if (ConfigurationManager.AppSettings.HasKeys()) ...