JQuery Datatable Checkall

Question

HTML

<div class="box">
<table id="Datatable">
    <thead>
       <tr>
         <th><input name="checkall" type="checkbox" class="checkall" value="ON" /></th>
         <th>field</th>
         <th>field</th>
         <th>field</th>
         <th>field</th>
         <th>field</th>
      </tr>
   </thead>
   <tbody>
      <tr>
        <th class="checkers"><input type="checkbox" name="selected[]"/></th>
        <td>value</td>                                          
        <td>value</td>  
        <td>value</td>  
        <td>value</td>  
        <td>value</td>  
      </tr>
   </tbody>
</table>
</div>

Я пытаюсь сделать флажок checkall, выбирая все флажки, используя этот код:

$('.checkall').click(function () {
        var checkall =$(this).parents('.box:eq(0)').find(':checkbox').attr('checked', this.checked);
        $.uniform.update(checkall);
    });

В качестве данных указываются первые 10,20,30.и т. д. строк и удаляет другие из DOM, чтобы сделать нумерацию страниц, этот код jQuery только выбирает строки на текущей странице.Так есть ли в любом случае, что я могу установить все флажки?

Answer 1

Мое решение тоже работает:

$('.checkall').click(function(e) {

          var chk = $(this).prop('checked');

          $('input', oTable.fnGetNodes()).prop('checked',chk);
        });

И если вы хотите проверить только отфильтрованные (если вы используете dom для фильтрации в таблицах данных), то вы можете использовать это, чтобы проверить только отфильтрованные

$('.checkall').click(function(e) {

          var chk = $(this).prop('checked');

          $('input', oTable.$('tr', {"filter": "applied"} )).prop('checked',chk);
        });

Answer 2

я нашел решение

$('.checkall', oTable.fnGetNodes()).click(function () {

Answer 3

Старая тема, но у меня есть несколько материалов.

Чтобы автоматически генерировать столбец с флажком, а не делать это встроенным, добавьте это в определение столбца:

"aoColumnDefs": [ { "mRender": function (data, type, full) { 
    return '<input type="checkbox" id="id" class="class" value="' + data + '">'; },  "aTargets": [0] } ]

// Note: aTargets is the zero-indexed array determining placement of the checkbox column
// "aTargets": [0] gives you the first column (first from left)

Как и предполагал RUN-CMD, вы можете использовать TableTools для обработки выделения строк, но это не помогло, так как выбор / выделение всех строк отделен от проверки ввода строки. Тем не менее, это хороший визуальный усилитель.

Мы можем программно проверить флажок строки, добавив этот код в функцию _fnRowSelect () в TableTools.js (функция - строки 1079 - 1119 в моем файле):

// This marks them as selected
    for ( i=0, len=data.length ; i<len ; i++ )
    {
        data[i]._DTTT_selected = true;

        if ( data[i].nTr )
        {
            $(data[i].nTr).addClass( that.classes.select.row );
            // Now if there's a checkbox somewhere in the row - we check it
            $(data[i].nTr).closest("tr").find('input[type="checkbox"]').prop('checked', 'checked');
        }
    }

И пока мы редактируем этот файл, давайте создадим новую кнопку TableTools, которая переключает выбрать все / выбрать ни одного. Теперь нам не нужно привязывать обе функции к одной кнопке.

Мы создадим эту кнопку сразу после выбора всех и не выберем ни одной кнопки в TableTools.js (начиная со строки 2393 в моем файле):

/* Combines select_all and select_none buttons
 * Default button text is a checkbox
 * to strip button style and use a checkbox alone put this on native page: 
 * $(".select-all-master").removeClass("btn");
 */
"select_master": $.extend( {}, TableTools.buttonBase, {
    "sButtonText": '<input type="checkbox" id="master_check" class="row_checks master_check" value="">',
    "sButtonClass": "select-all-master",
    "sAction": "div",
    "sTag": "div",
    "fnClick": function( nButton, oConfig ) {
        var that = this;
        var selected = false;
        $("table tr").each(function(i) {
            if ($(this).hasClass("active")) {
                selected = true;
            }
        });
        if (selected==false) {
            that.fnSelectAll();
            $("#master_check").prop('checked', 'checked');
        }
        if (selected==true) {
            that.fnSelectNone();
            $("#master_check").prop('checked', '');
            selected = false;
        }
    }
} ),

Теперь мы можем применить наш переключатель select all / none, вызвав его, как любую кнопку TableTools. В наших таблицах инструментов init:

"aButtons": [ { "sExtends": "select_master","sToolTip": "Tool tip to display on checkbox hover" } ]

Также в вашем родном init для datatables вы можете использовать:

Javascript:

$(document).ready(function() {
    $(".select-all-master").appendTo("thead#selectallbtn");
    $(".select-all-master").removeClass("btn");
});

HTML:

<thead class="selectallbtn"></thead>

Если вы хотите удалить стиль кнопки и поместить его в заголовок таблицы в качестве обычного флажка all / none controller. Если вы не используете загрузчик, подумайте над тем, чтобы сделать что-то подобное ( ссылка ) в вашем CSS, и код должен работать нормально.

Если все прошло гладко, результат должен быть примерно таким: http://screencast.com/t/c3ZDi0mmiGj

Самое большое удобство - нацеливание на флажок: свойство отмечено в любом месте строки, а не только при нажатии флажка. Полезно для пользователей с высоким разрешением или мобильного сенсорного удара / сенсорного запуска.

Answer 4

datatables предоставляет плагин "TableTools", который включает эту функцию.

http://datatables.net/extras/tabletools/

Вот примеры выбора строк, как для одиночного выбора, так и для множественного выбора:

http://datatables.net/release-datatables/extras/TableTools/select_single.html

http://datatables.net/release-datatables/extras/TableTools/select_multi.html

Кроме того, когда вы инициализируете таблицу данных с активированным плагином TableTools, вы получите доступ к следующим методам API:

• FnIsSelected
• fnSelect
• fnSelectAll
• fnSelectNone

методы API описаны здесь:
http://datatables.net/extras/tabletools/api

Answer 5

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