dataTables中checkbox多选框选中问题

项目场景:

项目使用dataTables进行表格操作,在存在翻页数据时,出现多选框无法翻页进行选中问题。


问题描述:

显示页面见下图
在这里插入图片描述
需要实现翻页选中的批量添加功能。但是翻页时出现仅能选择最新一页数据情况。后经查阅资料结合项目情况加以修改。

修改步骤:

  1. 页面checkbox设置。
<input th:id="id_+(${co.id})" type="checkbox" th:checked="${co.isChecked}"                           		 th:value="${co.id}" th:attr="get_uri=${co.id}" class="btn btn-sm btn-info chartBtn">

<button class="btn btn-primary" type="button" onclick="addActVpd();return false;">添加</button>
  1. 设置js全局变量
 var list = []
  1. js中页面初始化时获取所有选中数据集(数据量不大,查询是所有数据)
$(function(){
	  $(".table tbody").find('input[id^=id_]:checkbox').each(function() {
		  if ($(this).prop('checked') == true) {
			  var str = $(this).attr("id");
	          id = str.split("_")[1]; 
	          //获取id值,并放入到全局变量中
	  		  list.push(id)
	      }
	  })
  })
  1. 为checkbox添加动作监控
$('.table tbody').on('click','tr td .chartBtn',function () {
	  var id = $(this).attr("get_uri");
	  if($(this).prop('checked') == true){
	  //选中放入全局变量中
		  list.push(id)
	  }else{
	  //不选中,从全局变量中删除
		  list = list.filter(item => item != id); 
	  }
  })
  1. 提交时获取全局变量
function addActVpd(obj){
	  var vpdId = $("#vpdId").val();
	  $.post("/system/addActVpd", { "ids": list.join(","), "vpdId": vpdId },function(result){
		  var index=parent.layer.getFrameIndex(window.name);
		  parent.layer.close(index);
	  });
  }

注意:

在使用dataTables期间,含有翻页的数据,需要执行特定的行操作事件时,需要为该方法添加监控事件,否则只有部分操作生效


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值