如何将select记录在jquery数据中table分页

Question

您好，当我单击 select 全部（超链接）选项或我想要特定页面中的特定记录（使用复选框）时，我正在尝试发送 jquery 数据 table 中的所有记录) 到服务器 class，但问题是当我单击表单提交按钮时，即导出 PDF 仅从当前页面获取记录，即使 select 在其他页面中的记录 jquery 数据 table分页

为什么在jquery数据table不同页面的selected记录没有发送到javaclass

https://jsfiddle.net/4n5o3r3e/

<s:form id="downloadStudentDetailsForm" action="downloadStudentDetails" theme="css_xhtml" cssClass="form-horizontal">

<div class="dataTable_wrapper">
<table width="100%" class="table table-striped table-bordered table-hover" id="dataTS">
<thead>
<tr>
<th><a href="#" id="bas">Select all</a></th>
<th>Student Name</th>
<th>Parent Phone</th>   
<th>Parent Email</th>                                                       
<th>ReferenceID</th>
</tr>
</thead>
<tbody>
<s:iterator value="studentRecords">
<tr>
<td><s:checkbox name="students" cssClass="case chkPassport" fieldValue="%{studentname+' '+phone+' '+email+' '+ref}"  /></td>                                                            
<td><s:property value="studentname" /></td> 
<td><s:property value="phone" /></td>   
<td><s:property  value="email"></td>                                                        
<td><s:property value="ref" /></td>
 </tr>
 </s:iterator>
 </tbody>
 </table>
 </div>
 <div class="col-xs-1 ">
 <s:submit cssClass="btn btn-success" value="Export to Excel" id="exl" action="downloadStudentsListINExcel" />
 </div>
 <div class="col-xs-3 ">
 <s:submit cssClass="btn btn-danger" value="Export to PDF" id="pdf" action="downloadStudentsListInPDF" />
 </div>                                             </s:form>

Answer 1

希望我理解正确，您希望在单击 select 全部按钮时 select 所有行，并将 selected 行的计数发送到服务器。

这里是Working Demo.

所以我使用数据表api:

做了这个（你会弄清楚如何将计数发送到服务器）

$(document).ready(function() {
   var table =  $('#example').DataTable();

$("#selectall").click(function() {
    var rows = table.rows({ 'search': 'applied' }).nodes();

   debugger;
   if($('input:checked', rows).length == rows.length){
     $('input[type="checkbox"]', rows).prop('checked', false);
    }
    else{
     $('input[type="checkbox"]', rows).prop('checked', true);
   }


$('#dvcount').html($(rows).find("input:checked").length);

$("body").on("change","input",function() {

    var rows = table.rows({ 'search': 'applied' }).nodes();
    $('#dvcount').html($(rows).find("input:checked").length);

});

  } );

Answer 2

我尝试以不同的方式解决它，但我认为上面的答案是最优雅的。我查看了基础数据并进行了更改：

$(document).ready(function() {
  let runningTotal = 0;
  let table = $('#example').DataTable();
  $("#selectall").click(function() {
    if (runningTotal == table.rows().count()) {
      table.rows().every(function(rowIdx, tableLoop, rowLoop) {
        let clone = table.row(rowIdx).data().slice(0);
        clone[[clone.length - 1]] = '<input type="checkbox" class="record">'
        table.row(rowIdx).data(clone);
      });
    } else {
      table.rows().every(function(rowIdx, tableLoop, rowLoop) {
        let clone = table.row(rowIdx).data().slice(0);
        clone[[clone.length - 1]] = '<input type="checkbox" class="record" checked="checked">'
        table.row(rowIdx).data(clone);
      });
    }
    runningTotal = 0;
    table.rows().every(function(rowIdx, tableLoop, rowLoop) {
      var data = this.data();
      if ($(data[data.length - 1]).prop("checked")) {
        runningTotal++
      }
    });
    $('#dvcount').html(runningTotal);
  });
  $('#example tbody').on("click", ".record", function() {
    let clone = table.row($(this).closest('tr')).data().slice(0);
    let checkbox = clone[clone.length - 1];
    if ($(checkbox).prop("checked")) {
      clone[[clone.length - 1]] = '<input type="checkbox" class="record">'
    } else {
      clone[[clone.length - 1]] = '<input type="checkbox" class="record" checked="checked">';
    }
    table.row($(this).closest('tr')).data(clone);
    runningTotal = 0;
    table.rows().every(function(rowIdx, tableLoop, rowLoop) {
      var data = this.data();
      if ($(data[data.length - 1]).prop("checked")) {
        runningTotal++
      }
    });
    $('#dvcount').html(runningTotal);
  });
  $("#export").on("click", function() {
    let exportedRows = [];
    table.rows().every(function(rowIdx, tableLoop, rowLoop) {
      let data = table.row(rowIdx).data()
      if ($(data[data.length - 1]).prop("checked")) {
        exportedRows.push(data.slice(0, -1));
      }
    });
    console.log(exportedRows);
  });
});

这是一个 working JSFiddle。

如何将select记录在jquery数据中table分页

How to to select records in jquery data table pagination

datatable

jquery

datatables

struts2-jquery