1.写好json 数据

{                                                      
        "total":21,                                                      
        "rows":[                                                          
                {"code":"001","name":"Name zhangsanfeng","addr":"莆田 11","wang":"xiao"},        
                {"code":"002","name":"Name 2","addr":"Address 13","wang":"xiao"},        
                {"code":"003","name":"Name 3","addr":"Address 87","wang":"xiao"},        
                {"code":"004","name":"Name 4","addr":"Address 63","wang":"xiao"},        
                {"code":"005","name":"Name 5","addr":"Address 45","wang":"xiao"},        
                {"code":"006","name":"Name 6","addr":"Address 16","wang":"xiao"},          
                {"code":"007","name":"Name 7","addr":"Address 27","wang":"xiao"},          
                {"code":"008","name":"Name 8","addr":"Address 81","wang":"xiao"},          
                {"code":"009","name":"Name 9","addr":"Address 69","wang":"xiao"},          
                {"code":"010","name":"Name 10","addr":"Address 78","wang":"xiao"},   
                {"code":"011","name":"Name 1","addr":"Address 11","wang":"xiao"},        
                {"code":"012","name":"Name 2","addr":"Address 13","wang":"xiao"},        
                {"code":"013","name":"Name 3","addr":"Address 87","wang":"xiao"},        
                {"code":"014","name":"Name 4","addr":"Address 63","wang":"xiao"},        
                {"code":"015","name":"Name 5","addr":"Address 45","wang":"xiao"},        
                {"code":"016","name":"Name 6","addr":"Address 16","wang":"xiao"},          
                {"code":"017","name":"Name 7","addr":"Address 27","wang":"xiao"},          
                {"code":"018","name":"Name 8","addr":"Address 81","wang":"xiao"},          
                {"code":"019","name":"Name 9","addr":"Address 69","wang":"xiao"},          
                {"code":"020","name":"Name 10","addr":"Address 78","wang":"xiao"},
                {"code":"021","name":"Name 10","addr":"Address 78","wang":"xiao"},
{"code":"022","name":"Name 10","addr":"Address 78","wang":"xiao"},
{"code":"023","name":"Name 10","addr":"Address 78","wang":"xiao"}
,{"code":"024","name":"Name 10","addr":"Address 78","wang":"xiao"}
,{"code":"025","name":"Name 10","addr":"Address 78","wang":"xiao"}
,{"code":"026","name":"Name 10","addr":"Address 78","wang":"xiao"}
,{"code":"027","name":"Name 10","addr":"Address 78","wang":"xiao"}
        ]                                                          
}                                                          
2. html 页面代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Client Side Pagination - jQuery EasyUI Demo</title>
    <style type="text/css">

#dg
        {
            border-color:red;
        }
    </style>
        <link href="../themes/icon.css" rel="stylesheet" />
    <link href="../themes/default/easyui.css" rel="stylesheet" />
    <link href="../src/demo.css" rel="stylesheet" />
    <script src="../comjs/jquery-1.8.0.min.js"></script>
    <script src="../comjs/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="code" width="80">code No</th>
                <th field="name" width="100">name</th>
                <th field="addr" width="80">addr</th>
                <th field="wang" width="80" align="right">Amount</th>

</tr>
        </thead>
    </table>
    <script>
    
        var jilu;
        var rows = [];

function getData() {
            //ajax kai
        
            $.ajax({
                url: '../datagrid_data.aspx',
                type: "get",
                async: false,

dataType: "json",
                data: 'id=' + Math.random(),
                success: function (json) {

jilu = json;
                    for (var i = 0; i < json.rows.length; i++) {
                        rows.push({ "code": json.rows[i].code, "name": json.rows[i].name, "addr": json.rows[i].addr, "wang": json.rows[i].wang });
                    }

},
                error: function (xhr, status, errorThrown) {

alert("errorThrown=" + errorThrown);
                }
            })
        
           
            return rows;
        }

function pagerFilter1(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({//1
                onSelectPage: function (pageNum, pageSize) {//2
                  
                    opts.pageNumber = pageNum;
                    opts.pageSize = pageSize;
                    pager.pagination('refresh', {//3
                        pageNumber: pageNum,
                        pageSize: pageSize
                    });//3
                    dg.datagrid('loadData', data);
                },
                pageList:[4,10,15,20]//2
            });//1
            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').css('text-align','center');
            $('#dg').datagrid({
                loadFilter: pagerFilter1,
                width: 446,
                height:200,
                pageList: [4, 10, 15, 20],
                pageSize:4
            }).datagrid('loadData', getData());
        });
       
    </script>
</body>
</html>

就这么爽分页成功

easyui datagrid 分页 客户分页的更多相关文章

  1. jQuery EasyUI datagrid实现本地分页的方法

    http://www.codeweblog.com/jquery-easyui-datagrid%e5%ae%9e%e7%8e%b0%e6%9c%ac%e5%9c%b0%e5%88%86%e9%a1% ...

  2. easyUI datagrid 前端真分页

    前文再续,书接上一回.easyUI datagrid 前端假分页 http://blog.csdn.net/leftfist/article/details/43164977 真分页是easyUI d ...

  3. EasyUI DataGrid 使用（分页，url数据获取，data转json）

    EasyUI算是比较有名的,搜一下网上的资料也比较多,具体的参数,下载地址我就不写了 平常也不怎么写文章,大部分都是代码,有不能运行的可以直接评论回复 有可能遇到的问题: json数据格式,这个要仔细 ...

  4. easyUI datagrid 前端假分页

    datagrid有两种分页方式,真分页和假分页. 所谓真分页,就是真的每次只获取一张分页的数据. 所谓假分页,就是将所有数据全部获取下来,然后利用其分页控件进行分页. 下面具体说说假分页: 1.dat ...

  5. jQuery easyui datagrid pagenation 的分页数据格式

    {"total":28,"rows":[    {"productid":"FI-SW-01","unitco ...

  6. 【转】 jquery easyui datagrid使用，分页、排序、查询

    $('#dg').datagrid({ url: "xxx.ashx",                    pagination: true,                p ...

  7. asp.net mvc easyui datagrid分页

    提到 asp.net mvc 中的分页,很多是在用aspnetpager,和easyui datagrid结合的分页却不多,本文介绍的是利用easyui 中默认的分页控件,实现asp.net mvc分 ...

  8. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（8）-MVC与EasyUI DataGrid 分页

    系列目录 前言 为了符合后面更新后的重构系统,文章于2016-11-1日重写 EasyUI Datagrid在加载的时候会提交一些分页的信息到后台,我们需要根据这些信息来进行数据分页再次返回到前台 实 ...

  9. JQuery easyui Datagrid 分页事件

    easyui是Jquery中的一个轻量级UI插件,提供了一些诸如window.datagrid.button等控件.现在主要说说Datagrid中分页控件的使用. easyui中可以单独添加分页pag ...

随机推荐

  1. 使用JSP页面生成PDF报表

    转自:http://developer.51cto.com/art/200907/134261.htm 1.iText简介 iText是一个开放源码的Java类库,可以用来方便地生成PDF文件.大家通 ...

  2. SQL 2012 分页取数据

    ,), data int ) select * from t1 row rows only create clustered index t1c on t1(id) declare @i int ) ...

  3. Simple2D-20（重构）

    为什么重构 Simple2D 开始的时候打算使用几周的时间来实现 Simple2D 的,主要是实现一些简单的 2D 渲染功能.但是编写的过程中不满于它只能实现简单的功能,后来添加了诸如Alpha测试. ...

  4. ubuntu查询可用安装包

    当使用apt-get install packages时,如果不知道安装包的具体名称,可以使用关键字进行搜索,使用:apt-cache search keywords

  5. 搭建Turbine时，报错误：Property or field 'default' cannot be found on object of type 'com.netflix.appinfo.InstanceInfo'

    Spring Boot + Eureka Server + Hystrix with Turbine: empty turbine.stream 配置的时候遇到了问题: Property or fie ...

  6. PowerEdge服务器生命周期控制器：Lifecycle Controller

    戴尔从第11代服务器开始推出生命周期控制器(简称LC,即Lifecycle Controller).生命周期控制器(LC)通过在主板上部署的控制芯片和闪存,与BMC以及iDRAC卡配合,在服务器的整个 ...

  7. Numpy 基础知识

    1.使用ipython --pylab 自动加载 Numpy.Scipy.Matplotlib模块. 创建数组a = arange(10) b = arange(10,dtype='f')c = ar ...

  8. t检验，T Test (Student’s T-Test)

    1.什么是T test? t-test:比较数据的均值,告诉你这两者之间是否相同,并给出这种不同的显著性(即是否是因为偶然导致的不同) The t test (also called Student’ ...

  9. 大型运输行业实战_day10_1_自定义事务管理类

    1.创建事务管理类  TransactionManager.java package com.day02.sation.transaction; import com.day02.sation.uti ...

  10. openresty + luajit

    https://moonbingbing.gitbooks.io/openresty-best-practices/content/lua/brief.html ftp://ftp.csx.cam.a ...