标签：
最近的项目改用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();
标签：
原文地址：http://www.cnblogs.com/3d-soft/p/5909877.html
