<!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. 图像处理是用的数据类型uint8,double

    将原图像的灰度值转换成double的作用主要是考虑计算过程中的精度的问题,double 的数据是有小数点的,而uint8是0-255的整数,如果直接用uint8计算,会在计算过程中产生舍入误差,这种误 ...

  2. mysql主从复制主服务器日志格式的区别

        statement(语句级别,从服务器直接把语句拿来执行):            影响一大片(插入很多条或修改很多条),就适合用 statement       row(行级别,从服务器直接 ...

  3. NodeJS学习笔记 (29)二进制解码-string_decoder(ok)

    原文:https://github.com/chyingp/nodejs-learning-guide 自己过一遍: 模块简介 string_decoder模块用于将Buffer转成对应的字符串.使用 ...

  4. java uploadify 上传组件使用方法

    !!!声明 1-3 是jsp页面所写内容   文中需要的util  参见百度云 http://pan.baidu.com/s/1kV0gqBt   如已失效 请加QQ1940978083 1.首先引入 ...

  5. 关于FAT32分区的U盘4GB文件的测试

    关于FAT32分区的U盘4GB文件的测试 很多人都知道FAT32的分区,单文件大小不能超过4GB,关于这个问题就来测测看. FAT32最大文件大小为2的32次方,也就是4294967296 Byte, ...

  6. ArcGIS api for javascript——地图配置-增加一个调试控制台<

    描述 该示例展示了在应用中如何包含一个Dojo调试控制台.可以写信息到控制台来记录发生的事件和应用运行时设置的属性.当调试Internet Explorer浏览器的错误时这是极为有帮助的.(对Fire ...

  7. caioj1441:第k小的数Ⅰ

    [传送门:caioj1441] 简要题意: 给出一个n个数的序列,m个询问,每个询问输入l,r,k,输出第l个数到第r个数第k小的数 题解: 首先想到线段树,但是做不到询问区间的第几小,只能做到最大或 ...

  8. Python(五) 包、模块、函数与变量作用域

    一.while循环与使用场景 CONDITION=1 while CONDITION <=5 : CONDITION +=1 print("hello") else: pri ...

  9. Python(一) 基本类型

    前言: 什么是代码? 代码是现实世界事物在计算机世界中的映射. 什么事写代码? 写代码是将现实世界中的事物用计算机语言来描述. 一.数字:整形与浮点型 整型:int 浮点型:float (没有单精度和 ...

  10. apidoc接口文档的快速生成

    官方文档连接:http://apidocjs.com/#demo apidoc是一个轻量级的在线REST接口文档生成系统,支持多种主流语言,包括Java.C.C#.PHP和Javascript等.使用 ...