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があります。

だから私は、DataTableの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です。