尘光掠影 2017-08-06 1143浏览量
<html lang="en">
<head>
<meta charset="UTF-8">
<title>easyui-table表格客户端分页实例</title>
<link rel="stylesheet" type="text/css" href="./easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="./easyui/themes/icon.css">
<script type="text/javascript" src="./easyui/jquery.min.js"></script>
<script type="text/javascript" src="./easyui/jquery.easyui.min.js"></script>
</head>
<body>
<script type="text/javascript">
//手动制造30条测试数据
var data = [];
for (var i = 1; i < 31; ++i) {
data.push({
"movie":"战狼"+i,
"director":"吴京" + i +"号"
})
}
$(function () {
$("#easyuiTable").datagrid({
title:"easyui测试客户端分页",
rownumbers:true,
fitColumns:true,
pagination:true,
data:data.slice(0,10),
columns:[
[
{field:'movie', align:"center", title:"电影",width:100},
{field:'director', align:"center", title:"导演",width:100}
]
] //easyui需要两个破折号
});
//以下代码处理分页功能,可直接使用
var pager = $("#easyuiTable").datagrid("getPager");
pager.pagination({
total:data.length,
displayMsg:'当前显示从第{from}条到{to}条 共{total}条记录',
onSelectPage:function (pageNo, pageSize) {
var start = (pageNo - 1) * pageSize;
var end = start + pageSize;
$("#easyuiTable").datagrid("loadData", data.slice(start, end));
pager.pagination('refresh', {
total:data.length,
pageNumber:pageNo
});
}
});
});
</script>
</head>
<body>
<div id="easyuiTable"></div>
</body>
</html>
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。
集结各类场景实战经验,助你开发运维畅行无忧