上一篇隨筆提到了MvcPager,最近用到了一款前端JQ插件 DataTable（簡稱DT），很好用。 DT是一款前端插件，和後端完全分離開，就這點來看，我就特別喜歡。 一.使用DT，需要以下支持 js:jq+jquery.dataTables.min.js 二、頁面上進行引入js，直接使用DT功能 ...
上一篇隨筆提到了MvcPager,最近用到了一款前端JQ插件------DataTable（簡稱DT），很好用。
DT是一款前端插件，和後端完全分離開，就這點來看，我就特別喜歡。
一.使用DT，需要以下支持
js:jq+jquery.dataTables.min.js
二、頁面上進行引入js，直接使用DT功能
前端代碼：
1 @{ 2 Layout = null; 3 } 4 <!DOCTYPE html> 5 6 <html> 7 <head> 8 <meta charset="utf-8"> 9 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 10 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> 11 <title>用戶列表</title> 12 <link href="~/Content/Scripts/h-ui/css/H-ui.min.css" rel="stylesheet" /> 13 <link href="~/Content/Scripts/h-ui.admin/css/H-ui.admin.css" rel="stylesheet" /> 14 <link href="~/Content/Scripts/Hui-iconfont/1.0.8/iconfont.css" rel="stylesheet" /> 15 16 <style> 17 .page-container { 18 padding: 10px; 19 } 20 21 .operation { 22 background: #EFEEF0; 23 padding: 3px; 24 } 25 26 .search { 27 background: #EFEEF0; 28 padding: 5px; 29 margin-top: 5px; 30 } 31 32 .table { 33 margin-top: 10px; 34 } 35 36 .dataTables_info { 37 margin-left: 5px; 38 } 39 40 #table1_info { 41 padding: 0; 42 } 43 44 #table1_length { 45 margin-left: 15px; 46 } 47 </style> 48 <!--引入腳本解決相容性(hack技術，必須放入head中)--> 49 <!--[if lt IE 9]> 50 <script src="~/Content/Scripts/html5_css3/html5shiv.min.js"></script> 51 <script src="~/Content/Scripts/html5_css3/respond.min.js"></script> 52 <script src="~/Content/Scripts/PIE-2.0beta1/PIE_IE678.js"></script> 53 <![endif]--> 54 </head> 55 <body> 56 <div class="page-container"> 57 <div class="operation"> 58 <a class="btn btn-danger radius" href="javascript:;"><i class="Hui-iconfont"></i> 批量刪除</a> 59 <a class="btn btn-primary radius" href="javascript:;"><i class="Hui-iconfont"></i> 添加用戶</a> 60 </div> 61 62 <div class="search"> 63 <input type="text" id="nickname" class="input-text" style="width:100px;" placeholder="昵稱"> 64 <button id="search" class="btn btn-success" type="submit"><i class="Hui-iconfont"></i> 查詢</button> 65 </div> 66 67 <div class="table"> 68 <table id="table1" class="table table-border table-bordered table-bg table-hover"> 69 <thead> 70 <tr class="text-c"> 71 <th><input type="checkbox" name="" value=""></th> 72 <th>昵稱</th> 73 <th>賬號</th> 74 <th>密碼</th> 75 <th>添加時間</th> 76 <th>修改時間</th> 77 <th>是否禁用</th> 78 <th>操作</th> 79 </tr> 80 </thead> 81 </table> 82 </div> 83 </div> 84 </body> 85 </html> 86 <script src="~/Content/Scripts/jquery-2.0.3.min.js"></script> 87 <script src="~/Content/Scripts/datatables/1.10.13/jquery.dataTables.min.js"></script> 88 <script src="~/Content/Scripts/h-ui/js/H-ui.js"></script> 89 <script src="~/Content/Scripts/h-ui.admin/js/H-ui.admin.js"></script> 90 91 <script type="text/javascript"> 92 var table1 = null; 93 $(function() { 94 table1=initializeTable(); 95 $("#search").click(function() { 96 table1.ajax.reload(); 97 }); 98 }); 99 100 function initializeTable() {//初始化table 101 var table = $("#table1").DataTable({ 102 /****************************************表格數據載入****************************************************/ 103 "serverSide": true, 104 "ajax": {//ajax請求數據源 105 "url": "/UserInfo/Manager/Search", 106 "type": "post", 107 "data": function (data) {//添加額外的數據給伺服器 108 data.pageIndex = (data.start / data.length) + 1; 109 data.nickname = $("#nickname").val().trim(); 110 } 111 }, 112 "columns": [//列綁定 113 { "defaultContent": "" }, 114 { "data": "Nickname" }, 115 { "data": "LoginName" }, 116 { "data": "LoginPassword" }, 117 { "data": "AddTime" }, 118 { "data": "ModifyTime" }, 119 { "data": "IsForbidden" }, 120 { "defaultContent": "" } 121 ], 122 "columnDefs": [//列定義 123 { 124 "targets": [0], 125 "data": "UserInfoId", 126 "render": function (data, type, full) {//全部列值可以通過full.列名獲取,一般單個列值用data PS:這裡的render是有多少列就執行多少次方法。。。不知道為啥 127 return "<input type='checkbox' value='" + data + "' name='UserInfoId'>"; 128 } 129 }, 130 { 131 "targets": [4], 132 "data": "AddTime", 133 "render": function (data, type, full) {//全部列值可以通過full.列名獲取,一般單個列值用data PS:這裡的render是有多少列就執行多少次方法。。。不知道為啥 134 if (data == null || data.trim() == "") { return ""; } 135 else { var date = new Date(parseInt(data.slice(6))); return date.getFullYear() + "/" + date.getMonth() + "/" + date.getDate(); } 136 } 137 }, 138 { 139 "targets": [5], 140 "data": "ModifyTime", 141 "render": function (data, type, full) {//全部列值可以通過full.列名獲取,一般單個列值用data PS:這裡的render是有多少列就執行多少次方法。。。不知道為啥 142 if (data == null || data.trim() == "") { return "/"; } 143 else { var date = new Date(parseInt(data.slice(6))); return date.getFullYear() + "/" + date.getMonth() + "/" + date.getDate(); } 144 } 145 }, 146 { 147 "targets": [6], 148 "data": "IsForbidden", 149 "render": function (data, type, full) {//全部列值可以通過full.列名獲取,一般單個列值用data PS:這裡的render是有多少列就執行多少次方法。。。不知道為啥 150 if (data) { return "是"; } 151 else { return "否"; } 152 } 153 }, 154 { 155 "targets": [7], 156 "data": "UserInfoId", 157 "render": function (data, type, full) {//全部列值可以通過full.列名獲取,一般單個列值用data PS:這裡的render是有多少列就執行多少次方法。。。不知道為啥 158 return "<a style='text-decoration:none' class='ml-5 f-14' onclick=article_edit('資訊編輯','article-add.html','" + data + "') href='javascript:;' title='編輯'><i class='Hui-iconfont'></i></a>" + 159 "<a style='text-decoration:none' class='ml-5 f-14' onclick=article_del(this,'" + data + "') href='javascript:;' title='刪除'><i class='Hui-iconfont'></i></a>"; 160 } 161 }, 162 163 { "orderable": false, "targets": [0, 7] },// 是否排序 164 //{ "visible": false, "targets": [3, 5] }//是否可見 165 ], 166 "rowCallback": function (row, data, displayIndex) {//行定義 167 $(row).attr("class", "text-c"); 168 }, 169 "initComplete": function (settings, json) { //表格初始化完成後調用 170 171 }, 172 /****************************************表格數據載入****************************************************/ 173 /****************************************表格樣式控制****************************************************/ 174 "dom": "t<'dataTables_info'il>p",//表格佈局 175 "language": {//語言國際化 176 "lengthMenu": "每頁 _MENU_ 條", 177 "zeroRecords": "沒有找到記錄", 178 "info": "當前顯示 _START_ 到 _END_ 條，共 _TOTAL_條", 179 "infoEmpty": "無記錄", 180 "paginate": 181 { 182 "first": "首頁", 183 "previous": "前一頁", 184 "
