easyui datagrid 前台分页的实现java采用的版本

来源：本站原创 js知识 超过5,090人围观 暂无评论

使用easyui分页，有后台服务器端实现和前台浏览器端实现。服务器端实现按规定的格式返回数据就可以了，前台实现需要写js来实现。

代码如下：

关键代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
function pagerFilter(data){
           if (typeof data.length == 'number' && typeof data.splice == 'function'){    // 判断数据是否是数组
               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;
       }

完整的Demo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>客户端分页demo</title>
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/bootstrap/easyui.css">
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css">
    <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>
    <h2>客户端分页dem</h2>
    <div class="demo-info">
        <div class="demo-tip icon-tip"></div>
        <div></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<=80000; 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
                });
            }
            //console.log(JSON.stringify(rows));
            return rows;
 
        }
 
        function pagerFilter(data){
            if (typeof data.length == 'number' && typeof data.splice == 'function'){    // 判断数据是否是数组
                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>
 

转easyui datagrid 前台分页的实现的更多相关文章

  1. easyui datagrid 前台分页

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

  2. JQuery easyUI DataGrid 创建复杂列表头(译)

    » Create column groups in DataGrid The easyui DataGrid has ability to group columns, as the followin ...

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

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

  4. 控制EasyUI DataGrid高度

    这次要说的是控制EasyUI的高度,平时我公司的项目,用EasyUI较多,然后datagrid这个组件是用的非常多的.平时我们都是固定高度,常见代码如下:             <table  ...

  5. EasyUI datagrid 日期时间格式化

    EasyUI datagrid中显示日期时间时,会显示为以下不太直观的数值: 添加以下JavaScript脚本,然后在field中添加 formatter: DateTimeFormatter 即可. ...

  6. easyui datagrid中 多表头方法总结

    easyui datagrid中怎么设置表头成多行显示呢?其实很简单,就是给datagrid的columns属性设置成多个数组就行了.下面直接看例子吧,这是一个两行表头的,按照此方法,还可以设置三行表 ...

  7. jquery easyui datagrid翻页后再查询始终从第一页开始

    在查询之前将datagrid的属性pageNumber重新设置为1 var opts = grid.datagrid('options'); opts.pageNumber = 1; easyui d ...

  8. 让easyui datagrid支持bootstrap的tooltip

    让easyui datagrid支持bootstrap的tooltip 发表于 下午 1:53 by ylpro.net & 分类 Java. Easyui在1.3.3版本之前是不支持tool ...

  9. easyui datagrid 没数据时显示滚动条的解决方法

    今天解决了一个bug,因为datagrid有多列,可是当没有数据的时候,后面的列无法通过滚动条拉动来显示,比较麻烦,而需求要求没有数据也要拉动滚动条查看后面有什么列,一开始在网上找了一些资料,发现都不 ...

随机推荐

  1. 360sdk网游支付服务

    网游支付服务   目录 1.流程介绍2.接口介绍2.1支付接口[客户端调用](必接)2.2支付结果通知接口–应用服务器提供接口, 由360服务器回调(必接)2.3订单核实接口– 服务器端接口, 应用服 ...

  2. Ros系列_学习一

    刚入门ROS,不,没入门,还在门口,这是今天的总结: (一)创建一个工作空间 1.创建一个初始工作空间: mkdir -p ~/catkin_ws/src cd ~/catkin_ws/src cat ...

  3. 网络传输中利用fastjson将复杂嵌套数据类型Json格式转换（GeoJsonPolygon）

    如果一个对象太复杂了,那么在网络传输键的JSON格式数据转换容易出问题. 比如下面一个类Area.java import lombok.AllArgsConstructor; import lombo ...

  4. 线段树模板（HDU 6356 Glad You Came）

    题目: HDU 6356 http://acm.hdu.edu.cn/showproblem.php?pid=6356 很裸的线段树 #include<bits/stdc++.h> #de ...

  5. notepad++查看二进制文件

    1.进入以下网址去下载 https://sourceforge.net/projects/npp-plugins/files/Hex%20Editor/Hex%20Editor%20Plugin%20 ...

  6. scrapy 使用代理ip

    1.在settings文件中添加ip池 IPPOOL=['xxx.xx.xx.xx','xxx.xx.xxx.xx'] 2.在middleware文件中添加自己的代理ip类(首先需要导入ipPOOL, ...

  7. Tableau-安装的坑

    前言: 为了学习Tableau的教程,我下载了这个软件从官网,结果安装的时候一直报一个奇怪的错误, 由于当时没有截图,只记得错误代码Xo80076666好像是,提示安装失败,已经有另一个产品安装 在我 ...

  8. getHibernateTemplate()的用法 （转）

    在spring 中获得由spring所配置的hibernate的操作对象,然后利用此对象进行,保存,修改和删除等操作, 此方法是在配置了spring以后,hibernate由spring接管,不直接使 ...

  9. IDEA中配置Maven+spring MVC+tomcat

    一:配置Maven安装教程如下: http://blog.csdn.net/qq_32588349/article/details/51461182 实际安装过程中,如果按照教程配置如下属性,最后创建 ...

  10. web.config中连接字符串的读写和加密解密

    转载:https://www.cnblogs.com/shuai/articles/2248703.html 1.先来看看如何在web.config中写入数据库连接字符串.打开web.config文件 ...