說明：datatables是一款jQuery表格插件。感覺EasyUI的datagrid更易用

內(nèi)容：多選框和服務(wù)器端分頁

緣由：寫這篇博客的原因是datatables的文檔寫的不怎么樣，找東西很麻煩

環(huán)境：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啟動(dòng)服務(wù)器端分頁

??? "pageLength": 10 每頁10條記錄，注意pageLength注意大小寫，對(duì)應(yīng)的值一定要是數(shù)字，，因?yàn)閐atatables的js里沒有對(duì)這項(xiàng)類型轉(zhuǎn)換，寫成字符串會(huì)出問題。

???? 看下面的源碼

?????

??? "ajax": 這個(gè)就不用說了，去哪取數(shù)據(jù)

??? ”columns“： 這個(gè)的文檔在這里 http://datatables.net/reference/option/columns

???????? 里面{}的順序?qū)?yīng)表格中列的位置。

???????? ”data“：對(duì)應(yīng)的是后臺(tái)傳過來數(shù)據(jù)的key

???????? 重點(diǎn)說第一個(gè){}，是用來在第一列加一列多選框的。

???????? ”sClass“："text-center"? 設(shè)置的class名，多選框會(huì)居中顯示，可以去datatables的css里搜索這個(gè)class名看具體設(shè)置

???????? "data": "ID"? 這是要用到的數(shù)據(jù)，我把checkbox的value設(shè)置為ID,這樣方便取值

???????? ”render“ 這里就是要顯示的checkbox多選框了

如何實(shí)現(xiàn)全選：

?????? 注意這里用prop

1 2 3 4

$(".checkall").click(function?() { ??????var?check = $(this).prop("checked"); ??????$(".checkchild").prop("checked", check); });

????獲取選中的某一個(gè)checkbox的值

??? if ($(".checkchild:checked").length > 1) ????????? { ?????????????? alert("一次只能修改一條數(shù)據(jù)"); ?????????????? return; ????????? }

??? var id = $(".checkchild:checked").val();

服務(wù)器后端如何傳數(shù)據(jù)：

?????

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); ???????}

?說明： 前端會(huì)向后臺(tái)傳一些數(shù)據(jù)

?????? draw：這個(gè)不用關(guān)心，直接給它返回去就好了，注意要變成int類型

?????? start: 從第幾條記錄開始，從0開始計(jì)數(shù)，如果你每頁設(shè)置10條記錄，第一頁傳0，第二頁傳10，類推

?????? length: 每頁的記錄條數(shù)，對(duì)應(yīng)的前端js設(shè)置的pageLength。

?????? 返回json :Json(new { draw= draw, recordsTotal= totalCount, recordsFiltered= totalCount, data = menus }, JsonRequestBehavior.AllowGet);

?????? recordsTotal,recordsFiltered這兩個(gè)都填總記錄數(shù)就行了，data里就是實(shí)際的數(shù)據(jù)

?????? menus是一個(gè) IEnumerable<Menu>集合 ?

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。