Как я могу выбрать все флажки со всех страниц в JQuery DataTable

У меня есть HTML-страница, у которой есть несколько флажков, и по отдельности они могут быть проверены. У меня есть кнопка "Выбрать все", и когда я нажимаю на эту кнопку, все флажки должны быть выбраны, и когда я снова нажимаю на ту же кнопку, все флажки должны быть выделены без выделения со всех страниц.

В моей оригинальной программе есть тысячи записей, но за один раз на экран выводится 10 записей, но когда пользователь нажимает кнопку выбора, он должен выбрать все тысячи записей.

Я использую jQuery Datatables plug-in для отображения данных. Он предоставляет разбиение на страницы, поиск, сортировку и т.д., Поэтому я показываю только 10 записей на моей текущей странице. если я нажму на следующий или номер страницы, который предоставлен Bootstrap Datatable, будут отображены еще 10 записей. Как упоминание в проблеме, я хочу выделить все флажки со всех страниц.

$(document).ready(function () {
   $('body').on('click', '#selectAll', function () {
      if ($(this).hasClass('allChecked')) {
         $('input[type="checkbox"]', '#example').prop('checked', false);
      } else {
       $('input[type="checkbox"]', '#example').prop('checked', true);
       }
       $(this).toggleClass('allChecked');
     })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<html>
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <title>monitoring</title>
        <script src="jquery.js"></script>
         </head>
        <body>
        <table id="example" class="myclass">
        <thead>
        <tr>
         <th>
          <button type="button" id="selectAll" class="main">
          <span class="sub"></span> Select </button></th>
        	<th>Name</th>
        	<th>Company</th>
        	<th>Employee Type</th>
        	<th>Address</th>
        	<th>Country</th>
        </tr>
        </thead>
        <tbody>
        										  
        <tr>
        <td><input type="checkbox"/>
        </td>
        <td>varun</td>
        <td>TCS</td>
        <td>IT</td>
        <td>San Francisco</td>
        <td>US</td>
        </tr>

        <tr>
        <td><input type="checkbox"/>
        </td>
        <td>Rahuk</td>
        <td>TCS</td>
        <td>IT</td>
        <td>San Francisco</td>
        <td>US</td>
        </tr>

        <tr>
        <td><input type="checkbox"/>
        </td>
        <td>johm Doe</td>
        <td>TCS</td>
        <td>IT</td>
        <td>San Francisco</td>
        <td>US</td>
        </tr>

        <tr>
        <td><input type="checkbox"/>
        </td>
        <td>Sam</td>
        <td>TCS</td>
        <td>IT</td>
        <td>San Francisco</td>
        <td>US</td>
        </tr>

        <tr>
        <td><input type="checkbox"/>
        </td>
        <td>Lara</td>
        <td>TCS</td>
        <td>IT</td>
        <td>San Francisco</td>
        <td>US</td>
        </tr>

        <tr>
        <td><input type="checkbox"/>
        </td>
        <td>Jay</td>
        <td>TCS</td>
        <td>IT</td>
        <td>San Francisco</td>
        <td>US</td>
        </tr>

        <tr>
        <td><input type="checkbox"/>
        </td>
        <td>Tom</td>
        <td>TCS</td>
        <td>IT</td>
        <td>San Francisco</td>
        <td>US</td>
        </tr>
        																								
        </tbody>
        </table>
        				
        </body>
        </html>

Ответы

Ответ 1

Попробуйте использовать этот код:

$(document).ready(function () { 
    var oTable = $('#example').dataTable({
        stateSave: true
    });

    var allPages = oTable.fnGetNodes();

    $('body').on('click', '#selectAll', function () {
        if ($(this).hasClass('allChecked')) {
            $('input[type="checkbox"]', allPages).prop('checked', false);
        } else {
            $('input[type="checkbox"]', allPages).prop('checked', true);
        }
        $(this).toggleClass('allChecked');
    })
});

Магия должна произойти в fnGetNodes():

fnGetNodes(): получить массив узлов TR, которые используются в теле таблицы

Edit

Это альтернативное решение в основном для отладки (чтобы увидеть, работает ли оно). Вряд ли оптимальный код:

$(document).ready(function () { 
    var oTable = $('#example').dataTable({
        stateSave: true
    });

    var allPages = oTable.cells( ).nodes( );

    $('#selectAll').click(function () {
        if ($(this).hasClass('allChecked')) {
            $(allPages).find('input[type="checkbox"]').prop('checked', false);
        } else {
            $(allPages).find('input[type="checkbox"]').prop('checked', true);
        }
        $(this).toggleClass('allChecked');
    })
});

Ответ 2

Использовать datatable $instance для выбора https://datatables.net/docs/DataTables/1.9.4/#$

$(document).ready(function () { 
    var oTable = $('#example').dataTable({
        stateSave: true
    });

    $("#selectAll").on("change", function(){
        oTable.$("input[type='checkbox']").attr('checked', $(this.checked));  
    });
});

Ответ 3

DEMO

Самый простой способ - использовать следующий код jQuery:

//РЕДАКТИРОВАТЬ во втором клике, вы удалите все отмеченные флажки.

$('#selectAll').click(function(e) {
    if($(this).hasClass('checkedAll')) {
      $('input').prop('checked', false);   
      $(this).removeClass('checkedAll');
    } else {
      $('input').prop('checked', true);
      $(this).addClass('checkedAll');
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <title>monitoring</title>
        <script src="jquery.js"></script>
         </head>																			<body>
        <table id="example" class="myclass"/>
        <thead>
        <tr>
         <th>
          <button type="button" id="selectAll" class="main">
          <span class="sub"></span> Select </button></th>
        	<th>Name</th>
        	<th>Company</th>
        	<th>Employee Type</th>
        	<th>Address</th>
        	<th>Country</th>
        </tr>
        </thead>
        <tbody>
        										  
        <tr>
        <td><input type="checkbox"/>
        </td>
        <td>varun</td>
        <td>TCS</td>
        <td>IT</td>
        <td>San Francisco</td>
        <td>US</td>
        </tr>

        <tr>
        <td><input type="checkbox"/>
        </td>
        <td>Rahuk</td>
        <td>TCS</td>
        <td>IT</td>
        <td>San Francisco</td>
        <td>US</td>
        </tr>

        <tr>
        <td><input type="checkbox"/>
        </td>
        <td>johm Doe</td>
        <td>TCS</td>
        <td>IT</td>
        <td>San Francisco</td>
        <td>US</td>
        </tr>

        <tr>
        <td><input type="checkbox"/>
        </td>
        <td>Sam</td>
        <td>TCS</td>
        <td>IT</td>
        <td>San Francisco</td>
        <td>US</td>
        </tr>

        <tr>
        <td><input type="checkbox"/>
        </td>
        <td>Lara</td>
        <td>TCS</td>
        <td>IT</td>
        <td>San Francisco</td>
        <td>US</td>
        </tr>

        <tr>
        <td><input type="checkbox"/>
        </td>
        <td>Jay</td>
        <td>TCS</td>
        <td>IT</td>
        <td>San Francisco</td>
        <td>US</td>
        </tr>

        <tr>
        <td><input type="checkbox"/>
        </td>
        <td>Tom</td>
        <td>TCS</td>
        <td>IT</td>
        <td>San Francisco</td>
        <td>US</td>
        </tr>
        																								
        </tbody>
        </table>
        				
        </body>
        </html>

Ответ 4

Попробуйте это,

   if ($(this).hasClass('allChecked')) {
     $('input[type="checkbox"]').prop('checked', 'checked')
   } else {
     $('input[type="checkbox"]').prop('checked', 'false')
   }

Ответ 5

используйте dataTables.checkboxes.min.js и используйте "selectAllPages": false. Должна быть работа по подбору каждой страницы записи.

Ответ 6

var oTable = $('#myTable').DataTable({
    lengthMenu: [[10, 25, 50, -1], [10, 25, 50, 'All']]
    // stateSave: true
});
$('#selectAll').on('change', function() {
    oTable.$('.student_id:checkbox').prop('checked', $(this).prop('checked'));
});

jQuery(document).on('change', '.student_id', function() {
    if (jQuery(this).is(':checked')) {
        if (jQuery('.student_id:checked').length == jQuery('.student_id').length) {
            jQuery('#selectAll').prop('checked', true);
        } else {
            jQuery('#selectAll').prop('checked', false);
        }
    } else {
        jQuery('#selectAll').prop('checked', false);
    }
});