easyui datagrid分页要点总结
2024-08-24 20:41:54
easyui的datagird插件比较好用,也很方便。网上也有很多热的网友贴出了使用代码,但是很少有网友指出在使用过程应该注意的地方,让我实在搞不清分页应该怎么使用。我就说下使用分页功能中要注意的一个小地方。
1、首先你的html得有个table标签
<table id="tt" ></table>
在js页面加载代码中$(document).ready({})加入代码:
$('#tt').datagrid({
singleSelect:true, //True 就会只允许选中一行。
fitColumns:true, //True 就会自动扩大或缩小列的尺寸以适应表格的宽度并且防止水平滚动。
url: 'dataTable.ashx?action=list', //数据请求地址
title: false, //不要标题
method:'get', //请求方式
loadMsg: '数据加载中请稍后……', //数据等待时候的提示
striped: true, //True 就把行条纹化。(即奇偶行使用不同背景色)
columns: [[ // field- 后台传来的json 键名,title-表头列名,...
{ field: 'Id', title: 'ID', width: 100, align: 'center' },
{ field: 'Name', title: '名字', width: 100, align: 'center' },
{ field: 'Description', title: '描述', width: 100, align: 'center' },
{ field: 'Price', title: '价格', width: 100, align: 'center' }
]],
pageNumber:1, //初始页码 默认 1
pageSize: 10, //每页显示的记录条数,默认为10
pageList: [5, 10], //可以设置每页记录条数的列表
pagination: true //设置true 才提供分布功能。
})
设置 pagination: true 后就有分页功能了,自动捕获翻页事件,自动重新请求。
如果只需分页功能,加入此段代码就可以了。
当点击翻页按钮时,会自动重新请求服务器并自动带上参数rows和page,后台获取这两个参数进行数据库查询数据即可。
获取数据后,把数据转换成json格式返回,列表就更新了。
注意:json中一定要有两个键名:total,rows
total:控件会根据total的值来判断有多少页,能不能翻页。
rows:控件会展示rows的数据集合。rows的值放的是 本页的某些条数据。
后台返回json例子:{"total":2,"rows":[{"Id":1,"Name":"步步高点读机","Description":"哪里不会点哪里工tttttt","Price":12.0},{"Id":3,"Name":"苹果手","Description":"吊丝专有,泡妞神气","Price":12.0}]}
就此分页功能实现。
最新文章
- js判断中文
- IE8下服务端获取客户端文件的路径为C:/fakePath问题的解决方案
- Recaman&#39;s Sequence_递推
- VS2010 快速写入注释小技巧
- 转载:JAVA中使用JSON进行数据传递
- 超越css读书笔记
- hdu 4741 Save Labman No.004 [2013年杭州ACM网络赛]
- JAVA实现二进制,十六进制输出
- Django中过期@cache_page中缓存的views数据
- python 字典、列表、字符串 之间的转换
- Oracle 11g R2性能优化 tkprof
- ES查询-match VS match_phrase
- C/C++中如何在main()函数之前执行一条语句?
- IE 浏览器background image 属性问题
- 惠普/aruba交换机
- Utils--封装好的下载图片的方法
- zabbix第一篇:zabbix安装及使用
- 安装配置Android开发环境SDK
- JAVA数据结构--Array数组实现
- UDP套接字——(DGRAM)