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. servlet里的过滤器filter

    过滤器的主要作用 1,任何系统或网站都要判断用户是否登录. 2,网络聊天系统或论坛,功能是过滤非法文字. 3,统一解决编码 怎么创建一个过滤器: 1,生成一个普通的class类,实现Filter接口( ...

  2. uva-10305-水题-拓扑排序

    输入n,m,n代表点数,m代表边数(i,j),排序时i在j前面,没出现的点随意排 #include <iostream> #include<stdio.h> #include& ...

  3. 9. MyEclipse中的SVN操作手册

     该文章转载出处:http://blog.sina.com.cn/s/blog_8a3d83320100zhmp.html 1.导入项目 点击工具栏上的[File-Import],进入下图 (如果你的 ...

  4. 24. （ora-01410无效的rowid）临时表 on commit delete rows 与 on commit preserve rows 的区别

    ora-01410无效的rowid解决方式: 把临时表空间改成会话级别的就可以了,即把临时表的创建选项由on commit delete rows改为on commit preserve rows,就 ...

  5. 安装设置IIS5.1

    1.防止不停提示无法复制staxmem.dll: esentutl /p %windir%/security/database/secedit.sdb提示数据库损坏,是否恢复,选是,出现以下提示后退出 ...

  6. Others-接口集成方式

    1. 异步通信方式可分为不互锁.半互锁和全互锁三种类型: a.不互锁方式 主模块发出请求信号后,不等待接到从模块的回答信号,而是经过一段时间.确认从模块已收到请求信号后,便撤消其请求信号:从设备接到请 ...

  7. dmidecode详解

    1.DMI简介 DMI (Desktop Management Interface, DMI)就是帮助收集电脑系统信息的管理系统,DMI信息的收集必须在严格遵照SMBIOS规范的前提下进行. SMBI ...

  8. STS或eclipse安装SVN插件

    安装sts--SVN插件 简介:sts是与eclipse类似的Java IDE开发工具(不了解的百度) 1.sts菜单栏 help->install New Software 依据大家的版本选择 ...

  9. Hibernate DetachedCriteria实现

     前段时间在做模糊查询,并利用数据库分页,DAO用hibernate实现,刚开始的时候 根据业务层的数据,拼hql语句进行查询,且不说要进行一些if判断,单从结构上来说, 底层的数据访问层依赖于业务层 ...

  10. HTML 鼠标悬浮隐藏部分 习题

    css样式表: @charset "utf-8"; /* CSS Document */ .a { width:80px; height:40px; background-colo ...