87,902
社区成员
发帖
与我相关
我的任务
分享jquery自制分页，控制easyui datagrid分页
我现在不要用easyui中的pagination，因为样式只能是向上，向下，所以我想自己做一个分页的东西，自己的样式，可是我想要调用pagination中的内容，让我的控件可以去控制easyui datagrid的分页。。。请jquery高手指教~~~~
...全文
请发表友善的回复…
发表回复
clark_kidd 2013-09-14
- 打赏
- 举报
传到服务器的，无非两个参数 rows, page，可以自己在 param 里组装
服务器根据 rows, page 决定返回的记录条数有多少
服务器传回的json，无非是一个 {total: rows:[]} 对象，发送到客户端后， easyUI 负责显示
这就完了。
所以，根据你描述的，想自定义分页控件，我认为，你只要自行封装 param 提交到服务器即可
clark_kidd 2013-09-14
- 打赏
- 举报
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Complex DataGrid - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<link rel="stylesheet" type="text/css" href="demo.css">
<script type="text/javascript" src="../jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
$(function(){
$('#test').datagrid({
url:'datagrid_data.aspx',
idField:'code',
frozenColumns:[[
{field:'ck',checkbox:true},
{title:'Code',field:'code',width:80,sortable:true}
]],
columns:[[
{field:'name',title:'Name',width:120},
{field:'addr',title:'Address',width:220},
{field:'col4',title:'Col41',width:150}
]],
rownumbers:true,
onBeforeLoad: function(param){
param.page = param.requestPage || param.page || 1;
param.requestPage = undefined;
param.rows = 10;
$(".demo-info .page").html("向服务器请求的页码 page 为 " + param.page + "\r\n check it on server side by Request[\"page\"]");
}
});
});
function gotoPage(page){
$("#test").datagrid("reload", {requestPage:page});
}
</script>
</head>
<body>
<h2>Complex DataGrid</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div class="page"></div>
</div>
<div style="margin:10px 0;">
<a href="###" onclick="gotoPage(1)">1</a>
<a href="###" onclick="gotoPage(2)">2</a>
<a href="###" onclick="gotoPage(3)">3</a>
<a href="###" onclick="gotoPage(4)">4</a>
<a href="###" onclick="gotoPage(5)">5</a>
</div>
<table id="test"></table>
</body>
</html>clark_kidd 2013-09-14
- 打赏
- 举报
没必要
你既然都用自定义翻页控件了 没必要再把原来的打开 然后隐藏 最后修改源代码 触发被隐藏控件的事件 这是多此一举
关掉pagination，直接调用datagrid 的reload 方法，比你的做法简单高效
你的做法有点搞笑 绕了个圈子
liuxibei1987 2013-09-13
- 打赏
- 举报
easyui的pagination有具体属性的，页码，总数，每页记录数都有的。
你自己根据这些具体的数值来做吗，翻页的时候重新加载datagrid就行了
u010790563 2013-09-13
- 打赏
- 举报
请高手指导，自己顶一下
liuxibei1987 2013-09-13
- 打赏
- 举报
jquery.pagination.js
去看下easyui中的这个文件，稍微修改下就可以用的
liuxibei1987 2013-09-13
- 打赏
- 举报
大概一年半前我试过的。pagination 的selectPage 事件里去加载datagrid是可行的
clark_kidd 2013-09-13
- 打赏
- 举报
API中，pagination 提供的 Methods 只有以下3个
1.7.4. Methods
名称 参数 说明
options none 返回options对象。
loading none 把pagination变成正在加载（loading）状态。
loaded none 把pagination变成加载完成（loaded）状态。
也就是说，你没有办法从外部触发 pagination 的 selectPage 事件
你触发不了 selectPage ，无法模拟点击“下一页”的事件
所以，你要考虑扔掉 pagination
要用 datagird("reload", options); 方法实现重读另一个分页
clark_kidd 2013-09-13
- 打赏
- 举报
onSelectPage pageNumber, pageSize 当用户进行翻页时触发，回调函数包含2个参数:
pageNumber： 下一页的页码
pageSize： 下一页的显示记录数
http://www.phptogether.com/juidoc/pagination.html
有好心人整理的中文帮助手册
[/quote]
你可以调用 pagination() 来改变pagination的显示和属性，但无法触发 pagination 的 onSelectPage 的事件
clark_kidd 2013-09-13
- 打赏
- 举报
easyui的pagination有具体属性的，页码，总数，每页记录数都有的。
你自己根据这些具体的数值来做吗，翻页的时候重新加载datagrid就行了[/quote]
我自己做了分页的样式，可是不知道怎么去调用参数传给pagination，然后让datagrid实现翻页[/quote]
可以的呀
$('#pp').pagination({
total:2000,
pageSize:10，
pageNumber:1
}); 这样来把值传递给pagination，然后datagrid直接加载就行了[/quote]
你试过没？通过上述方法，pagination 的属性是被改变了，但是没有触发分页事件，而且，pagination 和 datagrid 存在一些绑定关系，你随意改 pagination 的属性，可能会导致出错
liuxibei1987 2013-09-13
- 打赏
- 举报
onSelectPage pageNumber, pageSize 当用户进行翻页时触发，回调函数包含2个参数:
pageNumber： 下一页的页码
pageSize： 下一页的显示记录数
http://www.phptogether.com/juidoc/pagination.html
有好心人整理的中文帮助手册
liuxibei1987 2013-09-13
- 打赏
- 举报
easyui的pagination有具体属性的，页码，总数，每页记录数都有的。
你自己根据这些具体的数值来做吗，翻页的时候重新加载datagrid就行了[/quote]
我自己做了分页的样式，可是不知道怎么去调用参数传给pagination，然后让datagrid实现翻页[/quote]
可以的呀
$('#pp').pagination({
total:2000,
pageSize:10，
pageNumber:1
}); 这样来把值传递给pagination，然后datagrid直接加载就行了
clark_kidd 2013-09-13
- 打赏
- 举报
datagrid 有 reload 函数
你把 datagrid 的 pagination 关了
你的控件分页时，触发 datagrid("reload", param)，就可以了
pagination 没有接口提供给第三方调用其点击功能，干脆就不要了
u010790563 2013-09-13
- 打赏
- 举报
easyui的pagination有具体属性的，页码，总数，每页记录数都有的。
你自己根据这些具体的数值来做吗，翻页的时候重新加载datagrid就行了[/quote]
我自己做了分页的样式，可是不知道怎么去调用参数传给pagination，然后让datagrid实现翻页
