1. дома
  2. Вопрос и ответ
  3. Как выбрать все флажки со всех страниц в jQuery DataTable

Как выбрать все флажки со всех страниц в jQuery DataTable

2015-04-27 1 views
11

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

В моей первоначальной программе есть тысячи записей, но в то время как 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> 
 
     \t <th>Name</th> 
 
     \t <th>Company</th> 
 
     \t <th>Employee Type</th> 
 
     \t <th>Address</th> 
 
     \t <th>Country</th> 
 
     </tr> 
 
     </thead> 
 
     <tbody> 
 
     \t \t \t \t \t \t \t \t \t \t 
 
     <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> 
 
     \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t 
 
     </tbody> 
 
     </table> 
 
     \t \t \t \t 
 
     </body> 
 
     </html>

источник

2015-04-27 Varun

+0

возможно дубликат [Выберите все флажки с помощью кнопки] (http://stackoverflow.com/questions/29841547/select- all-check-boxes-using-button) – EdenSource

+0

'table'tag не является самозакрывающимся тегом, пожалуйста, измените'

'и удалите'/' – jmgross

+0

You отправил тот же вопрос http: // stackoverflow.com/questions/29841547/select-all-check-boxes-using-button и http://stackoverflow.com/questions/29823843/how-do-i-select-all-check-box-when-i-click- на выбор кнопки-используя-jquerry? ** Используйте ссылки редактирования по тем же вопросам ** –

ответ

15

Попробуйте этот код вместо:

$(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 узлов, которые используются в теле таблицы

Редактировать

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

$(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'); 
    }) 
});

источник

2015-04-27 14:20:47 Mackan

+0

извините за то, что вы так глупы, но можете помочь мне с этим. Я совершенно новичок в этом. или просто дайте представление, как мне это сделать. – Varun

+0

@varun. Я немного обновил оба кода - поскольку более новая версия _DataTables_, по-видимому, использует другое определение опций. – Mackan

+1

Ты гений. наконец, вы это сделали. первый код, наконец, работал – Varun

0

DEMO

Самый простой способ заключается в использовании следующих JQuery кода:

// EDIT на второй клик, теперь удалить все установленные флажки.

$('#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> \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <body> 
 
     <table id="example" class="myclass"/> 
 
     <thead> 
 
     <tr> 
 
     <th> 
 
      <button type="button" id="selectAll" class="main"> 
 
      <span class="sub"></span> Select </button></th> 
 
     \t <th>Name</th> 
 
     \t <th>Company</th> 
 
     \t <th>Employee Type</th> 
 
     \t <th>Address</th> 
 
     \t <th>Country</th> 
 
     </tr> 
 
     </thead> 
 
     <tbody> 
 
     \t \t \t \t \t \t \t \t \t \t 
 
     <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> 
 
     \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t 
 
     </tbody> 
 
     </table> 
 
     \t \t \t \t 
 
     </body> 
 
     </html>

источник

2015-04-27 13:06:04

+0

его не работает – Varun

+0

он работает? вы можете запустить фрагмент кода выше. не забудьте добавить библиотеку jquery в свой собственный фрагмент! –

+0

Я включил библиотеку jQuery в свой код, но все еще не работал – Varun

1

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

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

источник

2015-04-27 13:08:10 syms

1

Используйте DataTable $ экземпляр для выбора 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)); 
    }); 
});

источник

2017-08-25 14:41:08

 Смежные вопросы

  • Нет связанных вопросов^_^