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期間，含有翻頁的資料，需要執行特定的行操作事件時，需要為該方法添加監控事件，否則隻有部分操作生效