jQuery EasyUI datagrid实现本地分页的方法
2024-08-24 07:34:04
http://www.codeweblog.com/jquery-easyui-datagrid%e5%ae%9e%e7%8e%b0%e6%9c%ac%e5%9c%b0%e5%88%86%e9%a1%b5%e7%9a%84%e6%96%b9%e6%b3%95/
这篇文章主要介绍了jQuery EasyUI datagrid实现本地分页的方法,以实例形式较为详细的分析了本地分页的原理与相关的实现技巧,需要的朋友可以参考下
本文实例讲述了jQuery EasyUI datagrid实现本地分页的方法。分享给大家供大家参考。具体如下:
一般分页都是后台做,前端做无论从哪方面考虑都不合适。但是有的时候还是有这种需求。
这里重点用到了pagination的监听,以及JS数组的slice方法来完成。代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<link href="js/jquery-easyui-1.3.6/themes/default/easyui.css" rel="stylesheet"/>
<link href="js/jquery-easyui-1.3.6/themes/icon.css" rel="stylesheet"/>
<script type="text/javascript" src="js/jquery-easyui-1.3.6/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-easyui-1.3.6/jquery.easyui.min.js"></script>
<script type="text/javascript">
// 表格数据源
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),
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
});
}
});
});
</script>
</head>
<body>
<div id="dd"></div>
</body>
</html>
运行效果如下图所示:
希望本文所述对大家的jQuery程序设计有所帮助。
最新文章
- JavaScript中设置元素class的三种方法小结
- Linux 进程间通信
- 使用streaming window函数统计用户不同时间段平均消费金额等指标
- c# 财务数据编号的生辰
- 今天做php经典实例,发现,我是对的,面试官给我说错了
- for xml path以及sql合并查询
- Front-End Engineer 技术栈
- JS获取ckeditor4.x里的值
- 1013 Realtime Status
- python学习笔记:2.python基础
- command not found解决方案
- idea设置条件断点
- 如何让我domain里的机器都跟domain controller的时间保持一致?
- Solr学习笔记之5、Component(组件)与Handler(处理器)学习
- JS进阶系列之this
- 最应该注意的Oracle版本之一
- Maven学习一:使用Myeclipse创建Maven项目
- smarty 总结和分析
- java实现时钟
- 使用Gson轻松解决复杂结构的Json数据解析
热门文章
- 微软职位内部推荐-Senior Development Engineer
- 基于Nodejs生态圈的TypeScript+React开发入门教程
- Response.Redirect(";x.aspx);跳转后session为null的解决方法
- Silverlight自定义控件开发:仪表盘
- 在opencv3中实现机器学习之:利用正态贝叶斯分类
- [CareerCup] 9.2 Robot Moving 机器人移动
- display:inline-block的坑
- 如何远程断点调试本地localhost项目
- Android测试框架初步
- 用html5+js实现掌机游戏赛车demo