1 <table id="mytable" class="table table-striped table-bordered" width="100%">
2 <thead>
3 <tr>
4 <th>序号</th>
5 <th>
6 <input type="checkbox" class="checkall" />
7 </th>
8 </tr>
9 </thead>
10 <tbody></tbody>
11 </table>
1 $(document).ready(function(){
2 var table = $("#mytable").DataTable({
3 "processing":true,
4 "ajax": {
5 "url": "user/getTableDatas",
6 },
7 "columns": [
8 {"data":"index",//序号
9 "render":function(data,type,row,meta){
10 var startIndex = meta.settings._iDisplayStart;
11 return startIndex+meta.row+1;
12 }},
13 {
14 "sClass": "text-center",
15 "data": "id",//行单选框
16 "render": function (data, type, full, meta) {
17 return '<input id="checkchild" type="checkbox" class="checkchild" value="' + data + '" />';
18 },
19 "bSortable": false
20 }
21 ],
22 //行被创建时调用
23 "createdRow":function(row,data,dataIndex){
24
25 }
26 });
27 //复选框全选
28 $(".checkall").click(function () {
29 var check = $(this).prop("checked");
30 $(".checkchild").prop("checked", check);
31 checkButton();
32 });
33 //行内的选择框选中
34 $(document).on("click","#checkchild",function(){
35 var check = $(this).prop("checked");
36 if(check && check==true){
37 $(this).prop("checked",false);
38 }else{
39 $(this).prop("checked",true);
40 }
41 checkButton();
42 });
43
44 //选中行事件
45 $("#mytable tbody").on("click","tr",function(){
46 var check = $(this).find(".checkchild").prop("checked");
47 if(check && check==true){
48 $(this).find('.checkchild').prop("checked",false);
49 }else{
50 $(this).find('.checkchild').prop("checked",true);
51 }
52 checkButton();
53
54 });
