說明：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>集合 ?

總結

以上是生活随笔為你收集整理的datatables.js 简单使用--多选框和服务器端分页的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。