最近的项目改用bootstrap样式,表格列表也使用Jquery DataTable插件。样式挺美观的。先来张截图:
1、初始化表格插件
1 oTable = table 2 .DataTable( 3 { 4 "language": GlobalDataTablesLang, 5 "ordering": false, //开关,排序功能 是否能排序 6 "pageLength": 10, // 默认每页记录数 7 "searching": false, //开关,过滤功能 显示搜索 8 "lengthChange": true, //开关,改变每页显示数据数量 显示 9 "lengthMenu": [ // 设置每页多少记录数 10 [5, 10, 15, 25, 50, 100], 11 [5, 10, 15, 25, 50, 100]], 12 "bRetrieve": false, 13 "columns": [{ 14 "data": "PostID" 15 }, { 16 "data": "PostID" 17 }, { 18 "data": "PostName" 19 }, { 20 "data": "PostGuid" 21 }, { 22 "data": "PostBZ" 23 }], 24 "serverSide": true, 25 "ajax": { 26 "url": "action/GetUserList", 27 "type": "POST" 28 }, 29 "fnPreDrawCallback": function () { 30 App.startPageLoading(); 31 return true; 32 }, 33 "fnDrawCallback": function () { 34 App.stopPageLoading(); 35 RenderCheck(); 36 }, 37 "fnRowCallback": function (nRow, aData, iDataIndex) { 38 return nRow; 39 } 40 }); 41 42 }
2、后台返回的数据格式
{"draw":"1","recordsTotal":3,"recordsFiltered":3,"data":[{"PostID":0,"PostName":"财务","PostGuid":"f45d761fdbd34dbcbf2d088247a745b8","PostBZ":""},{"PostID":0,"PostName":"馆长","PostGuid":"f4eaba3b7a6d42ba90be23edbd863d8f","PostBZ":""},{"PostID":0,"PostName":"前台人员","PostGuid":"66cceb2fa22f42b3acda6a069529132d","PostBZ":""}]}
3、刷新表格
oTable.ajax.reload();
时间: 2024-11-05 16:00:41