转easyui datagrid 前台分页的实现
easyui datagrid 前台分页的实现java采用的版本
使用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 前台分页的实现的更多相关文章
- easyui datagrid 前台分页
核心方法 //分页data function pagerFilter(data, pagegrid) { if (typeof data.length == 'number' && t ...
- JQuery easyUI DataGrid 创建复杂列表头(译)
» Create column groups in DataGrid The easyui DataGrid has ability to group columns, as the followin ...
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(8)-MVC与EasyUI DataGrid 分页
系列目录 前言 为了符合后面更新后的重构系统,文章于2016-11-1日重写 EasyUI Datagrid在加载的时候会提交一些分页的信息到后台,我们需要根据这些信息来进行数据分页再次返回到前台 实 ...
- 控制EasyUI DataGrid高度
这次要说的是控制EasyUI的高度,平时我公司的项目,用EasyUI较多,然后datagrid这个组件是用的非常多的.平时我们都是固定高度,常见代码如下: <table ...
- EasyUI datagrid 日期时间格式化
EasyUI datagrid中显示日期时间时,会显示为以下不太直观的数值: 添加以下JavaScript脚本,然后在field中添加 formatter: DateTimeFormatter 即可. ...
- easyui datagrid中 多表头方法总结
easyui datagrid中怎么设置表头成多行显示呢?其实很简单,就是给datagrid的columns属性设置成多个数组就行了.下面直接看例子吧,这是一个两行表头的,按照此方法,还可以设置三行表 ...
- jquery easyui datagrid翻页后再查询始终从第一页开始
在查询之前将datagrid的属性pageNumber重新设置为1 var opts = grid.datagrid('options'); opts.pageNumber = 1; easyui d ...
- 让easyui datagrid支持bootstrap的tooltip
让easyui datagrid支持bootstrap的tooltip 发表于 下午 1:53 by ylpro.net & 分类 Java. Easyui在1.3.3版本之前是不支持tool ...
- easyui datagrid 没数据时显示滚动条的解决方法
今天解决了一个bug,因为datagrid有多列,可是当没有数据的时候,后面的列无法通过滚动条拉动来显示,比较麻烦,而需求要求没有数据也要拉动滚动条查看后面有什么列,一开始在网上找了一些资料,发现都不 ...
随机推荐
- Module build failed: Error: Cannot find module 'url-loader' 的坑
本文地址:http://www.cnblogs.com/jying/p/8280956.html 开发环境:react.webpack.es5 引用图片报错:Module build failed: ...
- tensorflow 训练cifar10报错
1.AttributeError: 'module' object has noattribute 'random_crop' 解决方案: 将distorted_image= tf.image.ran ...
- HTML css 样式表
CSS样式表 2.1.样式表的基本概念 2.1.1.样式表分类 1.内联样式表 和html联合显示,控制精确,但是可重用性差,冗余多. 例:<p style="font-size:14 ...
- SQL server 基本语法
文字摘自https://www.cnblogs.com/chaoa/articles/3894311.html 一.定义变量 --简单赋值 declare @a intset @a=5 print @ ...
- phpexcel 导入超过26列时的解决方案
$highestColumn = $sheet->getHighestColumn(); // 取得总列数 ++$highestColumn; for ($row = 5; $row <= ...
- js身份证掩饰成**(class循环处理)
$('.shijian').each(function (i){ value=$(this).attr('data');value1=value.replace(/^(.{3})(?:\d+)(.{4 ...
- 跨时代的分布式数据库 – 阿里云DRDS详解(转)
原文章地址:https://www.csdn.net/article/a/2015-08-28/15827676 跨时代的分布式数据库 – 阿里云DRDS详解 发表于2015-08-28 18:39| ...
- python 进阶(转自http://python.jobbole.com/82633/)
网络 通用 urllib -网络库(stdlib). requests -网络库. grab – 网络库(基于pycurl). pycurl – 网络库(绑定libcurl). urllib3 – P ...
- scrapy 琐碎的东西
1.深度指定 DEPTH_LIMIT=1 2.常用命令 scrapy startproject name scrapy genspider name name.com scrapy crawl nam ...
- 相对熵(KL散度)
https://blog.csdn.net/weixinhum/article/details/85064685 上一篇文章我们简单介绍了信息熵的概念,知道了信息熵可以表达数据的信息量大小,是信息处理 ...