<!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. 初学者指南：ZFS 是什么，为什么要使用 ZFS？

    作者: John Paul 译者: LCTT Lv Feng 今天,我们来谈论一下 ZFS,一个先进的文件系统.我们将讨论 ZFS 从何而来,它是什么,以及为什么它在科技界和企业界如此受欢迎. 虽然我 ...

  2. caffe(11) 图像数据转换成db文件

    在深度学习的实际应用中,我们经常用到的原始数据是图片文件,如jpg,jpeg,png,tif等格式的,而且有可能图片的大小还不一致.而在caffe中经常使用的数据类型是lmdb或leveldb,因此就 ...

  3. 关于PHPExcel上传Excel单元格富文本和时间类型读取数据问题

    当用PHPExcel做Excel上传文件读取数据时,print_r出来的数据,竟然发现其中有几个单元格返回的是PHPExcel富文本对象,而且时间类型的单元格返回的是一个不是时间戳的五位数.就像下图那 ...

  4. 前端之CSS选择器

    基本选择器 元素选择器 p {color: "red";} ID选择器 #i1 { background-color: red; } 类选择器 .c1 { font-size: 1 ...

  5. Systemd曝3漏洞，大部分Linux将受到攻击

    Linux 系统与服务管理工具 Systemd 被曝存在 3 大漏洞,影响几乎所有 Linux 发行版. Systemd 是 Linux 系统的基本构建块,它提供了对系统和服务的管理功能,以 PID ...

  6. 【Henu ACM Round#16 E】Paths and Trees

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 感觉很像一道最短路. 然后就试了一发. 结果真的是.. 只要用一个优先队列优化的dijkstra算法求出每个点的最短路上的前一个点是 ...

  7. /*+parallel(t,4)*/在SQL调优中的重要作用!

    谈谈HINT /*+parallel(t,4)*/在SQL调优中的重要作用! /*+parallel(t,4)*/在大表查询等操作中能够起到良好的效果,基于并行查询要启动并行进程.分配任务与系统资源. ...

  8. BZOJ5105: [CodePlus2017]晨跑

    [传送门:BZOJ5105] 简要题意: 给出a,b,c,求a,b,c的最小公倍数 题解: 直接搞(最近刷水题有点心态爆炸) 参考代码: #include<cstdio> #include ...

  9. Android开发之蓝牙(Bluetooth)操作(一)--扫描已经配对的蓝牙设备

    版权声明:本文为博主原创文章,未经博主允许不得转载. 一. 什么是蓝牙(Bluetooth)? 1.1  BuleTooth是目前使用最广泛的无线通信协议 1.2  主要针对短距离设备通讯(10m) ...

  10. thinkphp5项目--企业单车网站（二）

    thinkphp5项目--企业单车网站(二) 项目地址 fry404006308/BicycleEnterpriseWebsite: Bicycle Enterprise Websitehttps:/ ...