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. (6/24) 插件配置：轻松配置JS文件压缩

    实际开发中,在项目上线之前,我们编写的js代码是需要进行压缩的,我们可以采取压缩软件或者在线进行压缩,这不是我们的重点,在webpack中实现JS代码的压缩才是本节的核心. 通过webpack中可实现 ...

  2. Zabbix结合Grafana绘图

    参考网站: https://www.jianshu.com/p/6eec985c5c94 注意事项: 1.在ganafa添加datasource的时候url写成http://10.116.33.116 ...

  3. zabbix配合脚本监控Kafka

    简介: Kafka是一种高吞吐量的分布式发布订阅消息系统,它可以处理消费者规模的网站中的所有动作流数据.Kafka如下特性,受到诸多公司的青睐. 1.高吞吐量:即使是非常普通的硬件Kafka也可以支持 ...

  4. jpa-jpql-basic-test

    jpql 基本测试 //可以使用 JPQL 完成 UPDATE 和 DELETE 操作. @Test public void testExecuteUpdate(){ String jpql = &q ...

  5. 1.java生成随机不重复10位字符串

    package org.changneng.util; import java.util.Random; public class A { public static void main(String ...

  6. attr 修改IMG src

    jQuery修改img的src的方法:$("#img_id").attr("src","new_src"); 定义和用法 attr() 方法 ...

  7. scala--函数式对象

    函数式对象 这次写点关于函数式对象的吧 class Rational(n:Int, d:Int) { // n,d 为类参数,scala会创造出同样带有这两个参数的主构造器.如果这个类没有主体,可以不 ...

  8. python的map函数和reduce函数（转）

    map函数 map()函数 map()是 Python 内置的高阶函数,它接收一个函数 f 和一个 list,并通过把函数 f 依次作用在 list 的每个元素上,得到一个新的 list 并返回. 例 ...

  9. Alpha Level (Significance Level)

    1.Alpha Level (Significance Level,显著水平): What is it? 显著性水平α是指当零假设是正确的,但做出了错误决策的概率(即一类错误的概率).Alpha水平( ...

  10. edgeR

    1)简介 edgeR作用对象是count文件,rows 代表基因,行代表文库,count代表的是比对到每个基因的reads数目.它主要关注的是差异表达分析,而不是定量基因表达水平. edgeR wor ...