<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Client Side Pagination - jQuery EasyUI Demo</title>
 <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
 <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
 <link rel="stylesheet" type="text/css" href="../demo.css">
 <script type="text/javascript" src="../../jquery-1.8.0.min.js"></script>
 <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
 <h2>Client Side Pagination</h2>
 <div class="demo-info">
  <div class="demo-tip icon-tip"></div>
  <div>This sample shows how to implement client side pagination in DataGrid.</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<=800; 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
    });
   }
   return rows;
  }
  
  function pagerFilter(data){
   if (typeof data.length == 'number' && typeof data.splice == 'function'){ // is array
    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>

DataGrid loadData loadFilter的更多相关文章

  1. datagrid中load,reload,loadData方法的区别

    它有其中有load,reload,loadData这三个方法,它们都有相同的功能,都是加载数据的,但又有区别. load方法,比如我已经定义一个datagrid的id为grid,那这个方法的使用方式为 ...

  2. EasyUI DataGrid 基于 Ajax 自定义取值(loadData)

    为 datagrid 加载数据分两种情况: 一种是基于 Ajax 请求获取数据然后通过"loadData"方法来赋值: 另一种是直接使用 datagrid 自带的"loa ...

  3. EasyUI中, datagrid用loadData方法绑定数据。

    $("#dg").datagrid("loadData", { , " }, { "ck": "1", &qu ...

  4. easyUI数据表格datagrid之分页

    一.分页函数 /**========================================= * 分页函数 */function pagerFilter(data) { if(typeof ...

  5. (转)扩展jquery easyui datagrid 之动态绑定列和数据

    本文转载自:http://blog.csdn.net/littlewolf766/article/details/7336550 easyui datagrid 不支持动态加载列,上次使用的方法是自己 ...

  6. asp.net EasyUI DataGrid 实现增删改查

    转自:http://www.cnblogs.com/create/p/3410314.html 前台代码: <!DOCTYPE html> <html xmlns="htt ...

  7. easyui datagrid 前台分页

    核心方法 //分页data function pagerFilter(data, pagegrid) { if (typeof data.length == 'number' && t ...

  8. easyui datagrid 后台返回所有数据，前台分页

    function pagerFilter(data) { if (typeof data.length == 'number' && typeof data.splice == 'fu ...

  9. EasyUI表格DataGrid前端分页和后端分页的总结

    Demo简介 Demo使用Java.Servlet为后台代码(数据库已添加数据),前端使用EasyUI框架,后台直接返回JSON数据给页面 1.配置Web.xml文件 <?xml version ...

随机推荐

  1. 没有显示器且IP未知的情况下登录树莓派

    如果是没有显示器操作树莓派,可能会不知道树莓派有线网卡自动分配到的IP地址,不知道登录到哪儿.以下提供详细操作步骤解决这个问题. 网段扫描法这个是推荐的办法.网段扫描工具很多,推荐一个Advanced ...

  2. Git基础(一)

    本系列内容主要介绍Git一些基本的也是最常用的命令,相信读完本系列内容后,你也差不多能够上手Git了.读完本系列,你就能初始化一个新的代码仓库,做一些适当配置:开始或停止跟踪某些文件:暂存或提交某些更 ...

  3. NHibernate 二级缓冲

    session.CreateCriteria(typeof(SysModuleFields)).SetCacheable(true).List<SysModuleFields>(); se ...

  4. [转]微软联合CSDN英雄在线编程大赛

    2014 新年将至,微软联合CSDN英雄会共同举办本次第三届在线编程大赛,题目详情如下: 有一个字符串"iinbinbing",截取不同位置的字符‘b’.‘i’.‘n’.‘g’组合 ...

  5. 瞎折腾之Mvc WebApi的使用以及跨域问题

    在公司经常会用到调用接口的情况,但是一直是用的webservice,我感觉真是太笨重了.虽然某些人感觉用的很爽.非常爽.比如说:公司在开发的时候需要对接另一组的接口,然后就只能是指定端口和ip到他的电 ...

  6. HDU 1698 (线段树 区间更新) Just a Hook

    有m个操作,每个操作 X Y Z是将区间[X, Y]中的所有的数全部变为Z,最后询问整个区间所有数之和是多少. 区间更新有一个懒惰标记,set[o] = v,表示这个区间所有的数都是v,只有这个区间被 ...

  7. UVa 122 (二叉树的层次遍历) Trees on the level

    题意: 输入一颗二叉树,按照(左右左右, 节点的值)的格式.然后从上到下从左到右依次输出各个节点的值,如果一个节点没有赋值或者多次赋值,则输出“not complete” 一.指针方式实现二叉树 首先 ...

  8. 51nod1346 递归

    我终于知道我有多么蠢了...推规律根本不带我这么推的...跟51nod那场比赛的傻逼B题一样,想都不想想就打表找规律...智障啊找规律也要按照基本法! //f[1][2]=a[1][2] f[2][1 ...

  9. 了解Objective-C中NSAutoreleasePool使用方法

    本文的目的是来了解Objective-C中NSAutoreleasePool使用方法,Objective-C的Foundation库实际上是种运行级对象系统,与一般的对象语言,例如C++,Java不一 ...

  10. 介绍 Android 的 Camera 框架

    总体介绍 Android Camera 框架从整体上看是一个 client/service 的架构,有两个进程:一个是 client 进 程,可以看成是 AP 端,主要包括 JAVA 代码与一些 na ...