Как изменить поведение множественного выбора в JavaScript DataTables при нажатии Enter?

Оффтоп javascript
1

Привет всем! У меня возникла проблема с JavaScript DataTables. Мне нужно изменить поведение таблицы при выборе нескольких строк и нажатии клавиши Enter. Вот что я хочу:

  • Если все строки не выбраны: выбрать все
  • Если все строки выбраны: снять выбор со всех
  • Если выбрана хотя бы одна строка: выбрать все

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

Буду очень благодарен за помощь! JavaScript - не самая сильная моя сторона, поэтому любые советы приветствуются.

2

Я бы предложил использовать API DataTables для решения этой задачи. Можно навесить обработчик на событие keydown, проверить, что нажат Enter, и далее использовать методы rows().select() и rows().deselect() для выбора или снятия выбора со строк.

Примерно так:

table.on('keydown', function(e) {
  if (e.keyCode === 13) {
    e.preventDefault();
    var allSelected = table.rows({selected: true}).count() === table.rows().count();
    allSelected ? table.rows().deselect() : table.rows().select();
  }
});

Это базовая идея, которую можно доработать под конкретные требования.

3

я сталкивался с этой проблемой и пробовал вариант, где при нажатии enter добавляешь обработчик события ключа. в нём я перебирал все строки таблицы, смотрел на их текущее состояние и в зависимости от него либо устанавливал выбор у всех, либо снимал его. главное — отменить стандартное поведение клавиши с помощью event.preventDefault(), чтобы не было конфликтов. такой подход, как мне кажется, вполне решает задачу даже если логика может быть чуть сложнее.

4

Можно попробовать такой вариант: при нажатии Enter проверяем количество выбранных строк. Если оно равно общему числу строк или нулю — инвертируем выбор для всех. В остальных случаях — выбираем все. Примерно так:

table.on(‘keydown’, function(e) {
if (e.keyCode !== 13) return;
e.preventDefault();
var selectedCount = table.rows(‘.selected’).count();
var totalRows = table.rows().count();
selectedCount === totalRows || selectedCount === 0 ?
table.rows().toggleClass(‘selected’) :
table.rows().addClass(‘selected’);
});