Поиск в отдельном столбце данных при вводе ключа

Question

У меня возникла проблема с реализацией Datatables с поиском по отдельному столбцу при нажатии клавиши Enter.

Сначала я реализовал это с помощью Datatables guide , например:

table.columns().every( function () {
        var that = this;

        $( 'input', this.footer() ).on( 'keyup change clear', function () {
            if ( that.search() !== this.value ) {
                that
                    .search( this.value )
                    .draw();
            }
        } );
    } );

Код выше работает нормально. Однако, поскольку таблица использует обработку на стороне сервера, поиск по нажатию клавиш слишком дорог.

Итак, я пытаюсь изменить код таким образом, чтобы он выполнял поиск по клавише Enter:

table.columns().every(function () {
    var that = this;

    $('input', this.footer()).keypress(function (e) {
        if (e.keyCode == 13) { //search only when Enter key is pressed to avoid wasteful calls
            e.preventDefault(); //input is within <form> element which submits form when Enter key is pressed. e.preventDefault() prevents this
            if (that.search() !== this.value) {
                that
                    .search(this.value)
                    .draw();
            }
        }
    });
});

С кодом выше, если я напишу поисковое значение и нажму Enter, он выполнит поиск как ожидается. Однако, если я напишу значение поиска для column1, но нажму enter на column2, он не выполнит поиск со значением в column1. Это приводит к тому, что пользователю необходимо нажать Enter в каждом столбце, чтобы добавить / удалить значение поиска. Пользователь не может сначала записать значения поиска в нужные столбцы, а затем нажать Enter на одном из них для поиска.

Из того, что мне удалось собрать, в таблице хранится значение, и оно не обновляется до Нажмите Enter для указанного столбца c. Я не уверен, как обойти это.

Answer 1

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

Вот рабочий код:

table.columns().every(function () {               
    $('input', this.footer()).keypress(function (e) {
        if (e.keyCode == 13) { //search only when Enter key is pressed to avoid wasteful calls
            e.preventDefault(); //input is within <form> element which submits form when Enter key is pressed. e.preventDefault() prevents this
            var header = table.table().header(); //header because I moved search boxes to header
            var inputBoxes = header.getElementsByTagName('input');
            $.each(data.columns, function (index) {
                var inputBoxVal = inputBoxes[index].value;
                table.column(index).search(inputBoxVal);
            });
            table.draw();
        }
    });
});

Answer 2

Есть два способа приблизиться к этому:

• Используйте activeElement, чтобы увидеть, какой элемент имеет фокус, и выполнить поиск соответственно.

• Установите таймер после keyup на исходное событие и выполните поиск через несколько секунд:

  var searchTimer;
  
  table.columns().every( function () {
    var that = this;
    $( 'input', this.footer() ).on( 'keyup change clear', function () {
      if ( that.search() !== this.value ) {
        clearTimeout(searchTimer); // Reset timer
        var value = this.value;
        searchTimer = setTimeout(function() {
          that.search(value).draw();
        }, 3000); // Wait 3 seconds
      }
    });
  });