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期间，含有翻页的数据，需要执行特定的行操作事件时，需要为该方法添加监控事件，否则只有部分操作生效