标签:分页控件 style class blog code ext
前台js
//加载数据表格 $("#tab_user").datagrid({ title:"用户表", iconCls:‘icon-edit‘,//图标 url:"getAllUserInfo", fitColumns:"true", striped:"true", nowrap:"true", loadMsg:"正在努力加载", pagination:"true", rownumbers:"true", showHeader:"true", toolbar: [{ text: ‘添加‘, iconCls: ‘icon-add‘, handler: function() { $("#add").dialog("open").dialog(‘添加信息‘, ‘New User‘); } }, ‘-‘, { text: ‘修改‘, iconCls: ‘icon-edit‘, id:"", handler: function() { } }, ‘-‘,{ text: ‘删除‘, iconCls: ‘icon-remove‘, handler: function(){ $("#dd").show(); } }], }); //设置分页控件 var p = $(‘#tab_user‘).datagrid(‘getPager‘); $(p).pagination({ pageSize: 10,//每页显示的记录条数,默认为10 pageList: [5,10,15],//可以设置每页记录条数的列表 beforePageText: ‘第‘,//页数文本框前显示的汉字 afterPageText: ‘页 共 {pages} 页‘, displayMsg: ‘当前显示 {from} - {to} 条记录 共 {total} 条记录‘, });
注意事项:编辑器会自动向后台传入两个个参数
1 rows 每页显示多少行
2 page 当前显示的页数 后台需要向前台返回json字符串
字符串格式为
{
"total": 15,//代表总行数
"rows": [//每一页的单独数据
{
"u_id": 1,
"u_name": "张杰",
"u_role": 1
},
{
"u_id": 2,
"u_name": "aa",
"u_role": 2
},
{
"u_id": 3,
"u_name": "bb",
"u_role": 3
},
{
"u_id": 4,
"u_name": "cc",
"u_role": 4
},
{
"u_id": 5,
"u_name": "dd",
"u_role": 5
},
{
"u_id": 6,
"u_name": "ee",
"u_role": 6
},
{
"u_id": 7,
"u_name": "ff",
"u_role": 7
},
{
"u_id": 8,
"u_name": "gg",
"u_role": 8
},
{
"u_id": 9,
"u_name": "hh",
"u_role": 9
},
{
"u_id": 10,
"u_name": "ii",
"u_role": 10
}
]
}
easyUI dataGrid使用,布布扣,bubuko.com
标签:分页控件 style class blog code ext
原文地址:http://www.cnblogs.com/zhangjie9142/p/3806635.html