<!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. Linux系统启动U盘制作工具

    1.UNetbootin UNetbootin 让你创建 Ubuntu 或者其他 Linux 发行版的可引导 Live U 盘,而无需烧录 CD. 你既能让 UNetbootin 为你下载众多开箱即用 ...

  2. 洛谷1019 单词接龙 字符串dfs

    问题描述 单词接龙是一个与我们经常玩的成语接龙相类似的游戏,现在我们已知一组单词,且给定一个开头的字母,要求出以这个字母开头的最长的“龙”(每个单词都最多在“龙”中出现两次),在两个单词相连时,其重合 ...

  3. bzoj1618 购买干草

    Description 约翰的干草库存已经告罄,他打算为奶牛们采购日(1≤日≤50000)磅干草．他知道N(1≤N≤100)个干草公司,现在用1到N给它们编号．第i个公司卖的干草包重量为Pi(1≤Pi ...

  4. 《Python生物信息学数据管理》中文PDF+英文PDF+代码

    生物信息学经典资料,解决生物学问题,通过"编程技法"的形式,涵盖尽可能多的组织.分析.表现结果的策略.在每章结尾都会有为生物研究者设计的编程题目,适合教学和自学.由六部分组成:Py ...

  5. 【Codeforces Round #462 (Div. 1) A】 A Twisty Movement

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] ans初值值为a[1..n]中1的个数. 接下来考虑以2为结尾的最长上升子序列的个数. 枚举中间点i. 计算1..i-1中1的个数c ...

  6. 金融项目java开发_BigDecimal(解决计算精度问题)

    当使用double进行商业运算时,double计算会丢失精度.可以使用BigDecimal进行计算. import java.math.BigDecimal; import org.junit.Tes ...

  7. 最全面的AndroidStudio配置指南总结-包括护眼模式

    使用AndroidStudio开发APP已有半年多的时间了,从刚开始的不习惯到慢慢适应再到逐渐喜欢上AndroidStudio,中间的过程颇有一番曲折,现在把自己对AndroidStudio的配置心得 ...

  8. [Angular] *ngIf syntx

    <div class="profile"> <img [src]="user.img" width="50px"> ...

  9. Java 反射经常用法演示样例

    <pre name="code" class="java">import java.lang.reflect.Constructor; import ...

  10. MyMathLib系列(行列式计算2)

    /// <summary> /// 行列式计算,本程序属于MyMathLib的一部分.欢迎使用,參考,提意见. /// 有时间用函数语言改写,做自己得MathLib,里面的算法经过验证,但 ...