首页 > 代码库 > ASP.NET使用Jquery datatable列表插件

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();

 

ASP.NET使用Jquery datatable列表插件