如何在jQuery數據表分頁中選擇記錄

Question

您好，我試圖發送所有記錄在jQuery數據表中，當我點擊選擇所有（超鏈接）選項或我想要特定記錄在特定頁面（使用複選框）到服務器類但問題是，當我點擊表單提交按鈕即導出PDF只獲取當前頁面的記錄，即使在其他頁面中選擇的記錄在jQuery數據表格分頁

爲什麼在jQuery數據表的不同頁面選擇的記錄不是發送到java類

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

我希望我理解正確的，你想上的選擇點擊所有按鈕時，選擇所有行併發送所選行的計數到服務器。

這是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。