jquery 데이터 테이블 페이지 매기기에서 레코드를 선택하는 방법

Question

안녕하세요, 모든 (하이퍼 링크) 옵션을 선택하거나 특정 페이지 (체크 박스를 사용하여) 서버 클래스에 특정 레코드를 원한다면 jquery 데이터 테이블에있는 모든 레코드를 보내려고합니다. 하지만 문제는 내가 양식 제출 버튼을 클릭 할 때입니다. 내보내기 PDF는 jquery 데이터 테이블 페이지 매김의 다른 페이지에서 선택된 레코드라도 현재 페이지의 레코드 만 가져오고 있습니다.

jquery 데이터 테이블의 다른 페이지에서 선택한 레코드가 자바 클래스로 전송

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입니다.

그래서 나는 이것이 datatables 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이다.