datatable动态生成复选框

来源:互联网 发布:网络信息诽谤案例 编辑:程序博客网 时间:2024/06/14 15:42

这里写图片描述
首先需要说明:
1,原始的datatable是没有复选操作和批量操作的
2,当用户点击批量的时候做了非空判断,然后选中后再将选中的数据id以链接的方式传递到下一个页面
3,整个页面是jsp格式

<a  href="javascript:void(0);" id="btnAll">批量编辑</a><table class="table table-striped table-bordered table-hover dataTables-example" id='table'>                                <thead class='head'>            <tr>                <th class='th'>                     <input type="checkbox" class="checkall" />                 </th>                <th>序号</th>                <th>设备编号</th>                <th>场所</th>                <th>设备型号</th>                <th>在线</th>                <th>状态</th>                <th>最后一次启动</th>                <th>操作</th>            </tr>        </thead>        <tbody>                                             <tr data-id="${equipment.id}">                    <td></td>                    <td>${equipment.id}</td>                    <td>${equipment.equipmentNum}</td>                    <td>${equipment.siteName}</td>                    <td>${equipment.equipmentType}</td>                    ............                </tr>        </tbody>    </table>

这里有一个问题关键点,如果列表的checkbox不是动态生成,很有可能,当用户点击第二页的头部全选的时候,会直接跳转到第一页的数据.

//动态生成复选框        var table = $('#table');          table.DataTable({            "fnDrawCallback": function() {                  $(this).find('thead input[type=checkbox]').removeAttr('checked');                                    },              "aoColumnDefs": [{                            'targets': 0,                            'searchable':false,                            'orderable':false,                            'className': 'dt-body-center',                            'render': function (data, type, row){                                return '<input class="checkchild" type="checkbox"/>';                            }                       }]            })           //datatable全选         $('.checkall').on('click', function () {               if (this.checked) {                    $(this).attr('checked','checked')                    $('.checkchild').each(function () {                        this.checked = true;                                            });                } else {                    $(this).removeAttr('checked')                    $('.checkchild').each(function () {                        this.checked = false;                    });                }                         });             //批量处理数据        $('#btnAll').on('click',function(){             var selectLoans = [];             $('.checkchild').each(function () {                 if($(this).is(':checked')){                     selectLoans.push($(this).parent().parent().attr('data-id'));                                    }             });            if(selectLoans.length == 0){                 layer.msg('请至少选中一项进行操作');                           $("#btnAll").attr("href",'javascript:void(0);');             }else{                var idListStr ='';                for (var i = 0; i < selectLoans.length; i++) {                     if(i!=selectLoans.length-1){                        idListStr = idListStr + selectLoans[i] +",";                    }else{                        idListStr = idListStr + selectLoans[i];                    }                 }                  $("#btnAll").attr("href",'equipment/batchUpdate.do?idListStr='+idListStr);             }                               });
原创粉丝点击