如何让DataTables归档功能处理所有分页的选中复选框？

现有一段可选中DataTables所有分页复选框的代码，其中index.jsp里的archivarTodo函数运行正常，但仅能归档当前可视化页面的选中复选框。#listado是展示ListDocs.jsp内容的iframe，需要修改该函数以实现归档DataTables所有分页的选中复选框。

原代码 #

ListDocs.jsp #

<th class="th2"> <input type="checkbox" id="select-all" name="checkDocs" title="Archivamiento" /></th>
<td align="center"><input class="ck" title='Archivar' type="checkbox" id="dArc<%=cb.getIdDocumento()%>" value="<%=cb.getIdDocumento()%>"/> </td>
<td align="center"><input class="inv" title='Invalidar' type="checkbox" id="dInv<%=cb.getIdDocumento()%>" value="<%=cb.getNodo()%>" <%=invalid%> <%=disabled%> onclick="invalida(this)"/> </td>

<script>
$("#select-all").click(function(event) {
    if($(this).is(":checked")) {
        $("#tablaResultados tbody input[type='checkbox']:not(.inv):not(:checked)").prop("checked", true);
        // 遍历所有页面并选中所有复选框
        var table = $('#tablaResultados').DataTable();
        for (var i = 1; i <= table.page.info().pages; i++) {
            table.page(i).draw(false);
            $("#tablaResultados tbody input[type='checkbox']:not(.inv):not(:checked)").prop("checked", true);
        }
    } else {
        $("#tablaResultados tbody input[type='checkbox']:not(.inv):checked").prop("checked", false);
        // 遍历所有页面并取消选中所有复选框
        var table = $('#tablaResultados').DataTable();
        for (var i = 1; i <= table.page.info().pages; i++) {
            table.page(i).draw(false);
            $("#tablaResultados tbody input[type='checkbox']:not(.inv):checked").prop("checked", false);
        }
    }
});
</script>

index.jsp #

function archivarTodo(){
    var trans =  document.getElementById('transf').value;
    if(trans == '1'){
        if(nodoCarp===""){
            alert("请选择一个文件夹");
        }else{
            var checkboxValues = "";

            $("#listado").contents().find(".ck:input:checked").each(function() {
                checkboxValues += $(this).val() + ",";
            });
            
            checkboxValues = checkboxValues.substring(0, checkboxValues.length-1);
            
            if (checkboxValues===""||checkboxValues==="on"){
                alert("未选择任何要归档的文档");
                return;
            }

            if(confirm("确定要执行归档吗？")){
                esperarCarp2("../imagenes/loadingAnimation.gif","500","1000","../archivar/ArchivarDoctosFiduciario.jsp?nodo="+nodoCarp+"&idDocs="+checkboxValues); 
            }
        }
    }else{alert("您没有归档权限");}    
}

解决方案 #

可以通过DataTables的API直接获取所有分页内的选中复选框，修改后的archivarTodo函数如下：

function archivarTodo() {
  var trans = document.getElementById('transf').value;
  console.log("权限值:", trans);
  if (trans == '1') {
    if (nodoCarp === "") {
      alert("请选择一个文件夹");
    } else {
      var iframe = document.getElementById('listado');
      var iframeWindow = iframe.contentWindow;
      var dataTable = iframeWindow.$('#tablaResultados').DataTable();
      var checkboxValues = "";

      // 获取DataTables所有分页中class为ck的选中复选框
      dataTable.$('.ck:input[type="checkbox"]:checked').each(function() {
        console.log("复选框值:", $(this).val());
        checkboxValues += $(this).val() + ",";
      });

      // 去除末尾多余的逗号
      if (checkboxValues.length > 0) {
        checkboxValues = checkboxValues.substring(0, checkboxValues.length - 1);
      }
      console.log("选中的复选框集合:", checkboxValues);

      if (checkboxValues === "") {
        alert("未选择任何要归档的文档");
        return;
      }

      if(confirm("确定要执行归档操作吗？")){
        esperarCarp2("../imagenes/loadingAnimation.gif","500","1000","../archivar/ArchivarDoctosFiduciario.jsp?nodo="+nodoCarp+"&idDocs="+checkboxValues); 
      }
    }
  } else {
    alert("您没有归档权限");
  }    
}

关键修改说明 #

• 直接调用iframe内的DataTables实例，利用API的$()方法获取所有分页的DOM元素（包括未渲染的页面），替代原仅查找当前页DOM的逻辑
• 优化空值判断逻辑，避免出现无效的"on"值问题
• 统一提示文本为中文，提升可读性

内容的提问来源于stack exchange，提问作者Luna Project