网页资讯视频图片知道文库贴吧地图采购
进入贴吧全吧搜索
c#吧 关注：188,236贴子：822,061
  • 14回复贴，共1页

easyui表格分页的问题

我用的是json传的数据


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>layout</title>
<script src="jquery-easyui-1.4.5/jquery.min.js" type="text/javascript"></script>
<script src="jquery-easyui-1.4.5/jquery.easyui.mobile.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery-easyui-1.4.5/jquery.easyui.min.js" charset="utf-8"></script>
<link href="jquery-easyui-1.4.5/themes/gray/easyui.css" rel="stylesheet" type="text/css" />
<link href="jquery-easyui-1.4.5/themes/icon.css" rel="stylesheet" type="text/css" />
<script src="jquery-easyui-1.4.5/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#dd').layout({
fit:true,
});
function formatShow(value,row,index){
if(value==1){
return "男";
}else{
return "女";
}
}
$('#box').datagrid({
method:'get',
url:'people.json',
title:'用户列表',
iconCls : 'icon-search',
pagination:true,
columns:[[
{
field:'name',
title:'姓名',
checkbox:true
},
{
field:'sex',
title:'性别',
formatter:formatShow,
},
{
field:'birthday',
title:'出生日期',
},
{
field:'email',
title:'邮箱',
},
]],
});
var p = $('#box').datagrid('getPager');
$(p).pagination({
pageSize: 5,
pageList:[5,10,15,20],
});
});
</script>
</head>
<body>
<div id="dd" class="easyui-layout" style="width:600px;height:400px;">
<div data-options="region:'north',title:'North Title',split:true" style="height:100px;">北</div>
<div data-options="region:'south',title:'South Title',split:true" style="height:100px;">南</div>
<div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;">东</div>
<div data-options="region:'west',title:'West',split:true" style="width:100px;">西</div>
<div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;">
<table id="box" ></table>
</div>
</div>
</body>
</html>


这是我的js和html代码


[
{
"name":"范冰冰",
"sex":"0",
"birthday":"1762-2-2",
"email":"fanbingbing@163.com"
},
{
"name":"周星驰",
"sex":"1",
"birthday":"1762-2-2",
"email":"xingye@163.com"
},
{
"name":"范冰冰",
"sex":"0",
"birthday":"1762-2-2",
"email":"fanbingbing@163.com"
},
{
"name":"范冰冰",
"sex":"0",
"birthday":"1762-2-2",
"email":"fanbingbing@163.com"
},
{
"name":"范冰冰",
"sex":"0",
"birthday":"1762-2-2",
"email":"fanbingbing@163.com"
},
{
"name":"范冰冰",
"sex":"0",
"birthday":"1762-2-2",
"email":"fanbingbing@163.com"
},
{
"name":"范冰冰",
"sex":"0",
"birthday":"1762-2-2",
"email":"fanbingbing@163.com"
},
{
"name":"范冰冰",
"sex":"0",
"birthday":"1762-2-2",
"email":"fanbingbing@163.com"
},
{
"name":"范冰冰",
"sex":"0",
"birthday":"1762-2-2",
"email":"fanbingbing@163.com"
},
{
"name":"范冰冰",
"sex":"0",
"birthday":"1762-2-2",
"email":"fanbingbing@163.com"
},
{
"name":"范冰冰",
"sex":"0",
"birthday":"1762-2-2",
"email":"fanbingbing@163.com"
},
{
"name":"范冰冰",
"sex":"0",
"birthday":"1762-2-2",
"email":"fanbingbing@163.com"
},
{
"name":"范冰冰",
"sex":"0",
"birthday":"1762-2-2",
"email":"fanbingbing@163.com"
}
]


这是json代码


最后我想一页显示5行数据，但是我运行后的结果还是没有变化


来人看一看啊


额。。。。首先我说一下思路
对于easyui的分页，
1 把分页栏显示出来 主要是 pagination: true 这句话
2 写出回调的分页js代码
var p = $('#gdv_Shipment').datagrid('getPager');
$(p).pagination({
total: d.total,
//rows: d.rows,
pageNumber: pageNumber,
pageSize: 5,//每页显示的记录条数，默认为10
beforePageText: '第',//页数文本框前显示的汉字
afterPageText: '页 共 {pages} 页',
displayMsg: '当前显示 {from} - {to} 条记录 共 {total} 条记录',
onSelectPage: function (pageNumber, pageSize) {
BindShipment(pageNumber, pageSize);
}
});
3 提供后台支持查询的action或者webapi
public APIResult<DataTable> GetShipmentALL(int? S_ID = null, int pageNumber = 1, int pageSize = 10)
这里的pageNumber和pageSize其实在第二部已经写上了，自己会回传过来的。


你试试这样设置
创建数据网格（DataGrid）
<table id="tt" title="Load Data" class="easyui-datagrid" style="width:550px;height:250px"
url="data/datagrid_data.json"
iconCls="icon-save" pagination="true">
<thead>
<tr>
<th field="itemid" width="80">Item ID</th>
<th field="productid" width="80">Product ID</th>
<th field="listprice" width="80" align="right">List Price</th>
<th field="unitcost" width="80" align="right">Unit Cost</th>
<th field="attr1" width="100">Attribute</th>
<th field="status" width="60" align="center">Stauts</th>
</tr>
</thead>
</table>
请记得，设置 'pagination' 属性为 true，这样才会生成分页工具栏。


有没有人晓得


扫二维码下载贴吧客户端

下载贴吧APP
看高清直播、视频！
  • 14回复贴，共1页
分享到: