jQuery EasyUI datagrid实现本地分页的方法
本文将向你详细介绍如何使用jQuery EasyUI datagrid实现本地分页功能。以一个实际案例的形式,我们会详细本地分页的原理和实现技巧。对于对此感兴趣的朋友来说,这无疑是一个有价值的参考。
通常,分页操作主要在后台完成,但在某些情况下,前端分页也是必要的。在这里,我们将主要使用pagination的监听以及JS数组的slice方法来完成。
以下是实现的HTML代码示例:
```html
var data = [];
// 用代码生成30条数据示例
for (var i = 1; i < 31; ++i) {
data.push({
"id": i,
"name": "Student" + i
})
}
$(function () {
$("dd").datagrid({
title: "测试本地分页",
rownumbers: true,
fitColumns: true,
pagination: true,
data: data.slice(0, 10), //初始加载前10条数据
columns: [
[
{ field: 'id', align: "center", title: "编号", width: 100 },
{ field: 'name', align: "center", title: "姓名", width: 100 }
]
]
});
var pager = $("dd").datagrid("getPager"); //获取分页器对象
pager.pagination({ //配置分页器属性
total: data.length, //总页数
onSelectPage: function (pageNo, pageSize) { //当页数或者每页显示的条数变化时触发的事件
var start = (pageNo - 1) pageSize; //计算起始位置
var end = start + pageSize; //计算结束位置
$("dd").datagrid("loadData", data.slice(start, end)); //加载对应的数据
pager.pagination('refresh', { //刷新分页器页数显示等信息
total: data.length, //总页数,需要和上面设置的一致
pageNumber: pageNo //当前页数,需要和上面设置的一致,以便显示正确的页码信息
});
}
});
});
编程语言
- jQuery EasyUI datagrid实现本地分页的方法
- JavaScript判断日期时间差的实例代码
- javascript判断变量是否有值的方法
- 卸载安装Node.js与npm过程详解
- JavaScript判断微信浏览器实例代码
- php版微信返回用户text输入的方法
- js实现数组冒泡排序、快速排序原理
- PHP5.5迭代生成器用法实例详解
- PHP中unset,array_splice删除数组中元素的区别
- Bootstrap fileinput 上传新文件移除时触发服务器同步
- JS中完美兼容各大浏览器的scrolltop方法
- jQuery简单获取DIV和A标签元素位置的方法
- Jquery ajax加载等待执行结束再继续执行下面代码操
- 详解在Angularjs中ui-sref和$state.go如何传递参数
- 正则匹配的test函数
- php获取超链接文本内容的正则表达式(五种方法