dataTables添加序号和行选中框 

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

 

posted @ 2017-01-06 15:34  suruozhong  阅读(5277)  评论(0)    收藏  举报