• 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     });
  • 相关阅读:
    使用cocoapods出现问题fetch of the ‘master’ 的解决方法
    说说ASP.NET的表单验证
    php分页类
    php校验
    mySQL时间
    asp .NET弹出窗口 汇总(精华,麒麟创想)
    (转)MVC 3 数据验证 Model Validation 详解
    (转)linux性能优化总结
    (转)ASP.NET缓存全解析6:数据库缓存依赖
    SQL Server是如何让定时作业
  • 原文地址:https://www.cnblogs.com/suruozhong/p/6256515.html
Copyright © 2020-2023  润新知