DT是一款前端插件，和后端完全分离开，就这点来看，我就特别喜欢。
一.使用DT，需要以下支持
js:jq+jquery.dataTables.min.js
二、页面上进行引入js，直接使用DT功能
前端代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> <title>用户列表</title> <link href="https://www.jb51.net/~/Content/Scripts/h-ui/css/H-ui.min.css" /> <link href="https://www.jb51.net/~/Content/Scripts/h-ui.admin/css/H-ui.admin.css" /> <link href="https://www.jb51.net/~/Content/Scripts/Hui-iconfont/1.0.8/iconfont.css" /> <style> .page-container { padding: 10px; } .operation { background: #EFEEF0; padding: 3px; } .search { background: #EFEEF0; padding: 5px; margin-top: 5px; } .table { margin-top: 10px; } .dataTables_info { margin-left: 5px; } #table1_info { padding: 0; } #table1_length { margin-left: 15px; } </style> <!--引入脚本解决兼容性(hack技术，必须放入head中)--> <!--[if lt IE 9]> <script src="https://www.jb51.net/~/Content/Scripts/html5_css3/html5shiv.min.js"></script> <script src="https://www.jb51.net/~/Content/Scripts/html5_css3/respond.min.js"></script> <script src="https://www.jb51.net/~/Content/Scripts/PIE-2.0beta1/PIE_IE678.js"></script> <![endif]--> </head> <body> <div> <div> <a href="javascript:;"><i></i> 批量删除</a> <a href="javascript:;"><i></i> 添加用户</a> </div> <div> <input type="text" placeholder="昵称"> <button type="submit"><i></i> 查询</button> </div> <div> <table> <thead> <tr> <th><input type="checkbox" value=""></th> <th>昵称</th> <th>账号</th> <th>密码</th> <th>添加时间</th> <th>修改时间</th> <th>是否禁用</th> <th>操作</th> </tr> </thead> </table> </div> </div> </body> </html> <script src="https://www.jb51.net/~/Content/Scripts/jquery-2.0.3.min.js"></script> <script src="https://www.jb51.net/~/Content/Scripts/datatables/1.10.13/jquery.dataTables.min.js"></script> <script src="https://www.jb51.net/~/Content/Scripts/h-ui/js/H-ui.js"></script> <script src="https://www.jb51.net/~/Content/Scripts/h-ui.admin/js/H-ui.admin.js"></script> <script type="text/javascript"> var table1 = null; $(function() { table1=initializeTable(); $("#search").click(function() { table1.ajax.reload(); }); }); function initializeTable() {//初始化table var table = $("#table1").DataTable({ /****************************************表格数据加载****************************************************/ "serverSide": true, "ajax": {//ajax请求数据源 "url": "/UserInfo/Manager/Search", "type": "post", "data": function (data) {//添加额外的数据给服务器 data.pageIndex = (data.start / data.length) + 1; data.nickname = $("#nickname").val().trim(); } }, "columns": [//列绑定 { "defaultContent": "" }, { "data": "Nickname" }, { "data": "LoginName" }, { "data": "LoginPassword" }, { "data": "AddTime" }, { "data": "ModifyTime" }, { "data": "IsForbidden" }, { "defaultContent": "" } ], "columnDefs": [//列定义 { "targets": [0], "data": "UserInfoId", "render": function (data, type, full) {//全部列值可以通过full.列名获取,一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥 return "<input type='checkbox' value='" + data + "'>"; } }, { "targets": [4], "data": "AddTime", "render": function (data, type, full) {//全部列值可以通过full.列名获取,一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥 if (data == null || data.trim() == "") { return ""; } else { var date = new Date(parseInt(data.slice(6))); return date.getFullYear() + "https://www.jb51.net/" + date.getMonth() + "https://www.jb51.net/" + date.getDate(); } } }, { "targets": [5], "data": "ModifyTime", "render": function (data, type, full) {//全部列值可以通过full.列名获取,一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥 if (data == null || data.trim() == "") { return "https://www.jb51.net/"; } else { var date = new Date(parseInt(data.slice(6))); return date.getFullYear() + "https://www.jb51.net/" + date.getMonth() + "https://www.jb51.net/" + date.getDate(); } } }, { "targets": [6], "data": "IsForbidden", "render": function (data, type, full) {//全部列值可以通过full.列名获取,一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥 if (data) { return "是"; } else { return "否"; } } }, { "targets": [7], "data": "UserInfoId", "render": function (data, type, full) {//全部列值可以通过full.列名获取,一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥 return "<a onclick=article_edit('资讯编辑','article-add.html','" + data + "') href='javascript:;' title='编辑'><i></i></a>" + "<a onclick=article_del(this,'" + data + "') href='javascript:;' title='删除'><i></i></a>"; } }, { "orderable": false, "targets": [0, 7] },// 是否排序 //{ "visible": false, "targets": [3, 5] }//是否可见 ], "rowCallback": function (row, data, displayIndex) {//行定义 $(row).attr("class", "text-c"); }, "initComplete": function (settings, json) { //表格初始化完成后调用 }, /****************************************表格数据加载****************************************************/ /****************************************表格样式控制****************************************************/ "dom": "t<'dataTables_info'il>p",//表格布局 "language": {//语言国际化 "lengthMenu": "每页 _MENU_ 条", "zeroRecords": "没有找到记录", "info": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_条", "infoEmpty": "无记录", "paginate": { "first": "首页", "previous": "前一页", "next": "后一页", "last": "末页" } }, "pagingType": "full_numbers",//分页格式 "processing": true,//等待加载效果 "ordering": false,//排序功能 /****************************************表格样式控制****************************************************/ }); return table; } </script>
后端代码: