首页 > 代码库 > 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列表插件
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。