ASP.NET使用Jquery datatable列表插件

最近的项目改用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();

 

转载于:https://www.cnblogs.com/3d-soft/p/5909877.html