zoukankan      html  css  js  c++  java
  • 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     });
  • 相关阅读:
    scheme中的fold-left和fold-right
    test
    2018.4.24-ml笔记(多元线性回归)
    2018.4.23-ml笔记(线性回归、梯度下降)
    springboot shiro开启注释
    Spring杂记BeanFactory之getBean方法
    docker搭建nginx+springboot集群
    springboot属性注入转化为对象
    mac下nginx搭建
    mybatis随笔五之Executor
  • 原文地址:https://www.cnblogs.com/suruozhong/p/6256515.html
Copyright © 2011-2022 走看看