jquery easyui datagrid 分页 详解
http://www.cnblogs.com/huozhicheng/archive/2011/09/27/2193605.html
由于项目原因,用了jquery easyui 感觉界面不错,皮肤样式少点,可是官网最近打不开了,资料比较少,给的demo没有想要的效果,今天在用datagrid 做分页显示的时候,折腾了半天,网上的资料也比较少,后自己动手,终于解决,废话不说,开始:
datagrid分页 有一个附加的分页控件,只需后台获取分页控件自动提交的两个参数rows每页显示的记录数和page;//当前第几页
然后读取相应页数的记录,和总记录数total一块返回即可 界面如下:
1、下边是datagrid的显示对话框,我直接用table把列头显示出来,感觉比用js写要易于阅读
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<table id= "list_data" cellspacing= "0" cellpadding= "0" >
<thead>
<tr>
<th field= "fldAppDept" width= "100" >部门</th>
<th field= "fldAppNode" width= "100" >网站</th>
<th field= "fldAppName" width= "100" >名称</th>
<th field= "fldAppMgr" width= "100" >管理员</th>
<th field= "fldAppNote" width= "100" >注释</th>
<th field= "fldAppType" width= "100" >类型</th>
<th field= "fldTelphone" width= "100" >电话</th>
<th field= "fldAppImg" width= "100" >职务</th>
<th field= "fldAppMonitor" width= "100" >启用监测</th>
<th field= "fldAppLevel" width= "100" >要重级别</th>
</tr>
</thead>
</table>
|
2、js代码,用于构建datagrid
注意 要想显示分页控件,pagination属性必须为true
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
|
//datagrid初始化
$( '#list_data' ).datagrid({
title: '应用系统列表' ,
iconCls: 'icon-edit' , //图标
width: 700,
height: 'auto' ,
nowrap: false ,
striped: true ,
border: true ,
collapsible: false , //是否可折叠的
fit: true , //自动大小
url: 'listApp.action' ,
//sortName: 'code',
//sortOrder: 'desc',
remoteSort: false ,
idField: 'fldId' ,
singleSelect: false , //是否单选
pagination: true , //分页控件
rownumbers: true , //行号
frozenColumns:[[
{field: 'ck' ,checkbox: true }
]],
toolbar: [{
text: '添加' ,
iconCls: 'icon-add' ,
handler: function () {
openDialog( "add_dialog" , "add" );
}
}, '-' , {
text: '修改' ,
iconCls: 'icon-edit' ,
handler: function () {
openDialog( "add_dialog" , "edit" );
}
}, '-' ,{
text: '删除' ,
iconCls: 'icon-remove' ,
handler: function (){
delAppInfo();
}
}],
});
//设置分页控件
var p = $( '#list_data' ).datagrid( 'getPager' );
$(p).pagination({
pageSize: 10, //每页显示的记录条数,默认为10
pageList: [5,10,15], //可以设置每页记录条数的列表
beforePageText: '第' , //页数文本框前显示的汉字
afterPageText: '页 共 {pages} 页' ,
displayMsg: '当前显示 {from} - {to} 条记录 共 {total} 条记录' ,
/*onBeforeRefresh:function(){
$(this).pagination('loading');
alert('before refresh');
$(this).pagination('loaded');
}*/
});
|
3、后台我是通过struts2处理的数据 返回json串
private JSONObject result; //返回的json
private String rows; //每页显示的记录数
private String page; //当前第几页
private AppServiceInter appService;
public JSONObject getResult() {
return result;
}
public void setResult(JSONObject result) {
this .result = result;
}
public void setAppService(AppServiceInter appService) {
this .appService = appService;
}
public String getRows() {
return rows;
}
public void setRows(String rows) {
this .rows = rows;
}
public String getPage() {
return page;
}
public void setPage(String page) {
this .page = page;
}
/**
* 查询应用系统
* @return
*/
public String listApp() {
System.out.println( "---------------" );
//当前页
int intPage = Integer.parseInt((page == null || page == "0" ) ? "1" :page);
//每页显示条数
int number = Integer.parseInt((rows == null || rows == "0" ) ? "10" :rows);
//每页的开始记录 第一页为1 第二页为number +1
int start = (intPage- 1 )*number;
List<TblApp> list = appService.findByPageApp(start,number); //每页的数据,放入list
Map<String, Object> jsonMap = new HashMap<String, Object>(); //定义map
jsonMap.put( "total" , appService.getCountApp()); //total键 存放总记录数,必须的
jsonMap.put( "rows" , list); //rows键 存放每页记录 list
result = JSONObject.fromObject(jsonMap); //格式化result 一定要是JSONObject
//result = JSONArray.fromObject(jsonMap);
return SUCCESS;
}
|
4、附上struts.xml配置文件
<package name="app" extends="json-default"> <action name="listApp" class="appAction" method="listApp"> <result type="json"> <param name="root">result</param> </result> </action>
</package>
jquery easyui datagrid 分页 详解相关推荐
- jQuery EasyUI DataGrid 分页 FOR ASP.NET
源代码: 前台(html): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...
- jQuery EasyUI datagrid实现本地分页的方法
本文实例讲述了jQuery EasyUI datagrid实现本地分页的方法.分享给大家供大家参考.具体如下: 一般分页都是后台做,前端做无论从哪方面考虑都不合适.但是有的时候还是有这种需求. 这里重 ...
- mvc jquery ajax分页实例,jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解,mvcpagerajax分页...
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解,mvcpagerajax分页 简单的两个步骤即可实现分页功能 //回调里面进行业务处理 function lo ...
- 最全的jquery datatables api 使用详解
https://www.cnblogs.com/amoniyibeizi/p/4548111.html 最全的jquery datatables api 使用详解 学习可参考:http://www.g ...
- easyui php分页,easyui datagrid分页 4、easyUI-七种布局(layout)
1.为网页创建边框布局 边框布局(border layout)提供五个区域:east.west.north.south.center.以下是一些通常用法: north 区域可以用来显示网站的标语. s ...
- 使用easyUI datagrid分页
使用easyUI datagrid分页 我用了比较简单的sturts2和mybatis结合的小测试demo实现的. 一.使用easyUI datagrid分页注意事项及原理: 1.EasyUI的Dat ...
- jQuery的deferred对象详解
阮一峰大神的关于jQuery的deferred对象详解 http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_ ...
- jQuery.extend 函数使用详解
jQuery.extend 函数使用详解 一.总结 一句话总结: jquery $.extend的作用就是:用于将一个或多个对象的内容合并到目标对象:$.extend( target [, objec ...
- jQuery Validate验证框架详解
2019独角兽企业重金招聘Python工程师标准>>> 一.导入js库 <script type="text/javascript" src="& ...
最新文章
- 剑鱼行动(普里姆算法)
- Django---Model操作
- 使用UIWebView加载网页
- ajax对象的属性和方法
- Resumable.js - 基于HTML5 File API的可断点续传的文件上传插件
- R语言导出为html,科学网—[转载]R语言中数据的导入与导出(笔记) - 刘朋的博文...
- 学习记录 | ZigBee协议栈工作流程
- 定向士官学计算机网络技术可以吗,山东信息职业技术学院2016年定向培养士官招生问答...
- 淘宝运营 DSR评分太低的影响 用补单的方法具体操作步骤,提高DSR评分
- 对话Oneledger联合创始人Edwin Zhang
- 讯飞离线语音识别使用出现初始化失败的解决方法
- oracle统计个数函数,oracle中字符串统计的函数
- atob()和btoa() 进行base64的编码和解码
- JavaCV1.5.3版本FFmpegFrameGrabber初始化的时候加载时间长的解决方法
- 有没有可操作的虚拟资源赚钱项目
- MSP430学习笔记(2)定时器A
- 通过tushare获取金融数据的方法
- 豆瓣电影多个作品里的海报、剧照图片怎样快速复制保存
- 新能源汽车,视频云及半导体产业链市场格局分析
- excel2007 html,excel2007兼容包
热门文章
- python条件语句-Python 条件语句
- python如何编程-终于发现怎么自学python编程
- 学会python爬虫怎么赚钱-学会python爬虫怎么赚钱
- python的工资为什么这么低-Python为什么这么火 Python岗位薪资水平如何
- python导入py文件-Python导入其他文件中的.py文件 即模块
- python 命令-python 处理命令行参数
- python基础知识选择题-Python练习题(基础知识练习题(一))
- python安装教程3.8.5-[分享栈]centos7安装python3.8.5
- python输出数据到excel-python实现数据导出到excel的示例--普通格式
- make编译工具使用