topjui/easyui 表格分頁簡單例項
$('#dg').datagrid({
rownumbers:true, //行號
singleSelect:true, //單選
autoRowHeight:false, //自動行高
pagination:true, //顯示錶格下面的分頁外掛
fitColumns:true, //欄位自動分配
collapsible:true, //表單收縮
checkOnSelect : false,
toolbar:'#tb', //顯示錶格上面的搜尋框等,這些按鈕在tb這個div裡
url:'${ctx}/....',//表格資料的請求路徑(由後臺提供;注意是裡面有rows的陣列,帶total的物件資料,否則無法直接顯示,大家模擬資料的時候要注意)
pageNumber:1, //預設顯示第幾頁
pageSize: 2,//每頁顯示的記錄條數,預設為10
pageList: [2,4,6,8],//可以設定每頁記錄條數的列表
columns:[[
{field:'id',title:'名稱',hidden:true},
{field:'opr',title: '操作',align: 'center',width:'25%',
formatter:function(value,row,index){//格式化
if(row.id) {//條件根據實際情況修改
return
" <a href='#' onclick='modify(\""+ row.id +"\",\""+index+"\")'>修改</a>"+
" <a href='#' onclick='del(\""+ row.id +"\",\""+index+"\")'>刪除</a>";
}
}
}
}]]
});
//設定分頁控制元件
var p = $('#dg').datagrid('getPager');
$(p).pagination({
beforePageText: '第',//頁數文字框前顯示的漢字
afterPageText: '頁 共 {pages} 頁',
displayMsg: '當前顯示 {from} - {to} 條記錄 共 {total} 條記錄',
});
//如果前端要模擬資料怎麼辦,json資料就是這個樣子
{
"rows": [
{"id":1,"opr": 1},
{"id":2,"opr": 2},
...
],
"total": 100
}