說明：datatables是一款jQuery表格插件。感覺EasyUI的datagrid更易用
內容：多選框和服務器端分頁
緣由：寫這篇博客的原因是datatables的文檔寫的不怎么樣，找東西很麻煩
環境：asp.net mvc ,? vs2015+sqlserver2012
顯示效果：
????
代碼：
?? html部分：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <table?id="tbUserList" class="table table-bordered table-hover">????<thead?class="text-center ">????????<tr>????????????<th>????????????????<input?type="checkbox" class="checkall" />????????????</th>????????????<th>ID</th>????????????<th>菜單名稱</th>????????????<th>菜單路徑</th>????????????<th>排序</th>????????????<th>添加日期</th>????????</tr>????</thead>????<tfoot?class="text-center ">????????<tr>????????????<th>????????????????<input?type="checkbox" class="checkall" />????????????</th>????????????<th>ID</th>????????????<th>菜單名稱</th>????????????<th>菜單路徑</th>????????????<th>排序</th>????????????<th>添加日期</th>????????</tr>????</tfoot></table> |
?JS部分：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | $(function?() {????var?_dataTables = $('#tbUserList').DataTable({?????????????????????"lengthChange":?false,????????"searching":?false,????????"ordering":?true,????????"info":?true,????????"autoWidth":?false,????????"pageLength": 10,????????"serverSide":?true,????????????????????"ajax": {????????????"url":?"/BasicManage/GetMenus",????????????"type":"POST"????????},????????"columns": [?????????????{?????????????????"sClass":?"text-center",?????????????????"data":?"ID",?????????????????"render":?function?(data, type, full, meta) {?????????????????????return?'<input type="checkbox"? class="checkchild"? value="'?+ data +?'" />';?????????????????},?????????????????"bSortable":?false?????????????},?????????????{?"data":?"ID"?},?????????????{?"data":?"Name"?},?????????????{?"data":?"MenuPage"?},?????????????{?"data":?"SortNo"?},?????????????{?"data":?"AddDateStr"?}?????????????????????????]????}); |
?JS部分簡單說明：
??? "serverSide": true啟動服務器端分頁
??? "pageLength": 10 每頁10條記錄，注意pageLength注意大小寫，對應的值一定要是數字，，因為datatables的js里沒有對這項類型轉換，寫成字符串會出問題。
???? 看下面的源碼
?????
??? "ajax": 這個就不用說了，去哪取數據
??? ”columns“： 這個的文檔在這里 http://datatables.net/reference/option/columns
???????? 里面{}的順序對應表格中列的位置。
???????? ”data“：對應的是后臺傳過來數據的key
???????? 重點說第一個{}，是用來在第一列加一列多選框的。
???????? ”sClass“："text-center"? 設置的class名，多選框會居中顯示，可以去datatables的css里搜索這個class名看具體設置
???????? "data": "ID"? 這是要用到的數據，我把checkbox的value設置為ID,這樣方便取值
???????? ”render“ 這里就是要顯示的checkbox多選框了
如何實現全選：
?????? 注意這里用prop
| 1 2 3 4 | $(".checkall").click(function?() {??????var?check = $(this).prop("checked");??????$(".checkchild").prop("checked", check);}); |
????獲取選中的某一個checkbox的值
??? if ($(".checkchild:checked").length > 1) ????????? { ?????????????? alert("一次只能修改一條數據"); ?????????????? return; ????????? }
??? var id = $(".checkchild:checked").val();
服務器后端如何傳數據：
?????
| 1 2 3 4 5 6 7 8 9 10 | public?JsonResult GetMenus()???????{???????????int?draw = Convert.ToInt32(Request["draw"]);???????????int?start = Convert.ToInt32(Request["start"]);???????????int?length = Convert.ToInt32(Request["length"]);???????????int?totalCount = 0;???????????MenuDAO Dao =?new?MenuDAO();???????????var?menus = Dao.GetMvcMenus((start/length)+1, length,?out?totalCount);???????????return?Json(new?{? draw= draw, recordsTotal= totalCount, recordsFiltered= totalCount, data = menus }, JsonRequestBehavior.AllowGet);???????} |
?說明： 前端會向后臺傳一些數據
?????? draw：這個不用關心，直接給它返回去就好了，注意要變成int類型
?????? start: 從第幾條記錄開始，從0開始計數，如果你每頁設置10條記錄，第一頁傳0，第二頁傳10，類推
?????? length: 每頁的記錄條數，對應的前端js設置的pageLength。
?????? 返回json :Json(new { draw= draw, recordsTotal= totalCount, recordsFiltered= totalCount, data = menus }, JsonRequestBehavior.AllowGet);
?????? recordsTotal,recordsFiltered這兩個都填總記錄數就行了，data里就是實際的數據
?????? menus是一個 IEnumerable<Menu>集合 ?
 Exception)
---Float)
