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