DataTable разбивает на страницы, выбирает всю строку

Я использую DataTable для отображения своей таблицы, у меня есть 3 столбца (см. изображение)

Проблема в том, что когда я нажимаю All, выбирается только отображаемая строка разбивки на страницы, но когда я перехожу на страницу 2 или другую, строки не выбираются...

ОБЪЯВЛЕНИЕ ДАННЫХ

var table = $('#translations').DataTable({
    dom: 'rtl<"text-center" ip>',
    ordering: false,
    pageLength: 25
});

НАЧАЛЬНИК ТАБЛИЦЫ

<thead>
    <tr>
        <th class="col-xs-1"><input type="checkbox" name="select_all" id="select_all" onClick="selectAll(this)">&nbsp;All</th>
        <th class="col-xs-5">Term</th>
        <th class="col-xs-6">Translation</th>
    </tr>
</thead>

ВЫБЕРИТЕ ВСЕ ПО НАЖАТИЮ

function selectAll(source) {
    checkboxes = document.getElementsByName('selectCb');

    for(var i = 0, n = checkboxes.length; i < n; i++) {
        checkboxes[i].checked = source.checked;

    }
}

Таблица экрана


jquery css datatables
person Antoine D    schedule 13.07.2018    source источник
comment
Должны ли все выбирать только отображаемые строки? Верно?   -  person Yuri    schedule 13.07.2018
comment
Возможный дубликат Как могу ли я установить все флажки на всех страницах в jQuery DataTable   -  person Mark    schedule 13.07.2018
comment
эй @Yuri, All не должен выбирать строки всей таблицы, а не только ту, которая показана в текущей разбивке на страницы   -  person Antoine D    schedule 13.07.2018

Ответы (3)


arrow_upward
4
arrow_downward

Используя jQuery в DOM, вы получаете доступ только к видимым строкам. Вам потребуется доступ к внутренней версии таблицы dataTables, то есть к ее «кэшу». Вот функция «checkall», перебирающая все строки, изменяя отмеченное состояние для флажка с классом .checkbox1 :

$('#select_all').click(function(event) {  //on click 
  var checked = this.checked;
  table.column(0).nodes().to$().each(function(index) {    
    if (checked) {
      $(this).find('.checkbox1').prop('checked', 'checked');
    } else {
      $(this).find('.checkbox1').removeProp('checked');            
    }
  });    
  table.draw();
});

Вы можете удалить эту функцию Onclick, если используете этот код

Использование to$() позволяет нам сразу работать с jQuery над содержимым.

person Geo V L    schedule 13.07.2018
comment
Это работает, чтобы проверить все строки, но когда я пытаюсь получить все значения с помощью: $('#table tr').filter(':has(:checkbox:checked)').each(function() { // this = tr console.log(this.id); });, он просто извлекает проверенные строки текущей страницы. - person Antoine D; 13.07.2018
comment
@AntoineD, как могло быть иначе? Вы используете jQuery, который нацелен только на видимые строки (т.е. DOM); Если вы хотите выполнить итерацию по всем строкам, вы также должны пройти через API. - person davidkonrad; 14.07.2018
comment
Да, я только что понял это, спс за помощь - person Antoine D; 16.07.2018

arrow_upward
0
arrow_downward

Этот код запускается, когда вы нажимаете на номер страницы.

$('#translation').on('page.dt', function () {
    var info = table.page.info();
    // put any code you want
});

Вы можете реализовать весь контрольный список внутри функции. Чтобы получить текущий номер страницы, используйте info.page. Чтобы получить общее количество страниц, используйте info.pages.

person david    schedule 13.07.2018

arrow_upward
0
arrow_downward

Сценарий с данными по умолчанию не снимает флажок в нумерации страниц, пожалуйста, измените имя флажка на это имя = "select_all []"

person Rahul kalal    schedule 13.07.2018