проверяет все флажки в DataTable, включая скрытые строки

Question

Я пытаюсь сделать функцию, которая проверяет все флажки в DataTable, включая скрытые строки. Вот HTML код для столбца "флажок":

<div class="usersTable" id="userTable"> 
    <table cellpadding="0" cellspacing="0" id="customersList" > 
     <thead> 
      <tr> 
       <th><input type="checkbox" name="selectall" id="selectall" class="selectall"/></th> 
       <th width="200">val1</th> 
       <th width="80px">val2</th> 
       <th width="70px">val3</th> 
       <th width="450">val4</th> 
       <th width="60px">val5</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td></td> 
       <td></td> 
       <td></td> 
       <td></td> 
       <td></td> 
       <td></td> 
      </tr> 
     </tbody> 
    </table> 
</div> 

кнопку Отправить:

<input type='button' value='select all' id='selectallboxes' name='selectallboxes' /> 

И код JQuery, который не работает:

$(function() {   
    otable = $('#customersList').dataTable({ 
     "bJQueryUI": true, 
     "sPaginationType": "full_numbers", 
     "aLengthMenu" : [ [10,20,50,100,1000], [10,20,50,100,1000] ], 
     "iDisplayLength": 100, 
     "bProcessing": true, 
     "bServerSide": true, 
     "aaSorting":[],   
     "iDisplayStart": 0, 
     "sAjaxSource": "filename", 
     .... 

$("#selectallboxes").click (function() { 
     alert(dt.fnGetNodes().length + ' is total number') 
     var selected = new Array(); 
     $('input', dt.fnGetNodes()).each(function() { 
       $(this).attr('checked','checked'); 
       selected.push($(this).val());      
     }); 
     // convert to a string 
     var mystring = selected.length; 
     alert(mystring); 
}) 

Answer 1

Ok, так что должно быть то, что вам нужно, это найдет всю текущую страницу <tr> и пройдёт через них с помощью dataTables _ API. Вы можете изменить фильтр в соответствии с вашими потребностями, чтобы выбрать разные строки, если хотите, все это задокументировано в документации по данным.

$("#selectallboxes").click (function() 
{ 
    var selected = new Array(); 

    // Use the _ function instead to filter the rows to the visible 
    var data = oTable._('tr', {"filter":"applied"}); 

    $.each(data, function(key, index) 
    { 
     var input = $(this).find('input[type="checkbox"]'); 

     input.attr('checked', 'checked'); 

     selected.push(input.val()); 
    }); 

    // convert to a string 
    var mystring = selected.length; 

    alert(mystring); 
}); 

Answer 2

Try:

$("#selectallboxes").click(function() { 
    var selected = new Array(); 
    $(otable.fnGetNodes()).find(':checkbox').each(function() { 
     $this = $(this); 
     $this.attr('checked', 'checked'); 
     selected.push($this.val()); 
    }); 
    // convert to a string 
    var mystring = selected.join(); 
    alert(mystring); 
}); 

.length дает длину массива. Я использовал join(), чтобы объединить массив в строку. DataTable's .fnGetNodes() дает вам все строки в таблице, включая скрытые.

Answer 3

попробовать что-то вроде

$("#selectallboxes").click (function() { 
    var selected = []; 
    $('input:checkbox', otable).each(function() { 
     selected.push($(this).prop('checked', true).val());      
    }); 
    // convert to a string 
    alert(selected.join()); 
}) 

Answer 4

fnGetNodes() будет давать только те строки, которые видны, есть расширение, чтобы получить скрытые строки из-за постраничной fnGetHiddenNodes(), но это будет работать с JQuery DataTable версии 1.9, обновление для того же самого в jquery datatable 1.10, но это не работает. Вы можете сохранить ваши данные, полученные от запроса ajax в массиве, а затем на основе условия события щелчка флажка перерисовать таблицу с данными и вводами (флажок) с выбранным атрибутом.