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); } });
阅读全文
0 0
- datatable动态生成复选框
- php动态生成复选框
- easyui ajax 动态生成CheckBox 复选框
- 动态生成DataTable
- 动态生成DataTable
- 动态生成DataTable
- 动态生成DataTable
- 动态生成表DataTable
- dtree组件动态生成带复选框的目录树
- 动态生成HTMLTable,table,DataTable
- 动态生成TreeView并实现单击选中复选框同时实现复选框单选
- struts动态复选框
- 动态添加复选框
- jsf-后台动态生成richfaces的dataTable
- 动态生成表格,金额转换,datatable
- PAIP.从DATATABLE动态生成表头
- dev 根据datatable动态生成gridview
- Struts 的动态复选框
- 不使用u盘或刻录在win10下安装ubuntu双系统
- JS随机数的写法
- 前端开发必备!Emmet使用手册--转载
- QT——QByteArray及QBuffer
- idea的使用
- datatable动态生成复选框
- 分析 HTTPS 原理以及在 Android 中的使用
- 有关响应消息头及UTF-8格式内容的输出的练习
- SpringMVC @ResponseBody 415错误处理
- 微信第三方开放平台 61007 api is unauthorized
- oracle客户端 安装过程一闪就消失的问题
- Imager图片设置
- IT互联网各职业职业解析
- C指针(一)