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. OpenACC Julia 图形

    ▶ 书上的代码,逐步优化绘制 Julia 图形的代码 ● 无并行优化(手动优化了变量等) #include <stdio.h> #include <stdlib.h> #inc ...

  2. leetcode50

    public class Solution { public double MyPow(double x, int n) { return Math.Pow(x, (double)n); } }

  3. xe7 c++builder 日期时间头文件函数大全 date

    c++builde r时间日期函数大全,在头文件System.DateUtils.hpp,不过没有IncMonth,因为这个函数定义在System.SysUtils.hpp里头了,唉 date,dat ...

  4. windows installer 应用变换时的错误.请验证指定的变换路径是否有

    安装Windows Installer Clean Up 清理一下残留的项目之后再装或者手动去注册表找 HKEY_CLASSES_ROOT\Installer\Products\ 下面的"子 ...

  5. 机器学习入门-集成算法(bagging, boosting, stacking)

    目的:为了让训练效果更好 bagging:是一种并行的算法,训练多个分类器,取最终结果的平均值 f(x) = 1/M∑fm(x) boosting: 是一种串行的算法,根据前一次的结果,进行加权来提高 ...

  6. 在mfc中picture控件中显示Mat图片<转>

    void ShowMatImgToWnd(CWnd* pWnd, cv::Mat img) { if(img.empty()) return; CRect drect; pWnd->GetCli ...

  7. MVC控制器详解

    原文地址:http://www.cnblogs.com/SeeYouBug/p/6441934.html#3628606 目录 一.理解控制器 1.1.什么是控制器 1.2.控制器的作用 1.3.创建 ...

  8. python限制函数执行时间

    from:https://stackoverflow.com/questions/366682/how-to-limit-execution-time-of-a-function-call-in-py ...

  9. MySQLReport

    简介: MySQLReport 一.安装 shell > yum -y install mysqlreport perl-DBD-MySQL 二.使用 shell > mysqlrepor ...

  10. eclipse添加源码的另外一种方法

    当我们使用maven或者gradle时,我们不需要担心源码的问题.Maven会帮我们下载jar包的同时下载对应的源码包.一般为source.jar,比如servlet-api-2.5-sources. ...