jQuery DataTables: задержка поиска до 3-х символов или нажатие кнопки

Question

Есть ли возможность начать поиск только после ввода 3 символов?

Я написал PHP-скрипт для коллег, отображающий 20 000 записей, и они жалуются, что при наборе слова первые несколько букв приводят к зависанию всего.

Альтернативой может быть запуск поиска нажатием кнопки, а не набором символов.

Ниже мой текущий код:

$("#my_table").dataTable( {
        "bJQueryUI": true,
        "sPaginationType": "full_numbers",
        "bAutoWidth": false,
        "aoColumns": [
                /* qdatetime */   { "bSearchable": false },
                /* id */          null,
                /* name */        null,
                /* category */    null,
                /* appsversion */ null,
                /* osversion */   null,
                /* details */     { "bVisible": false },
                /* devinfo */     { "bVisible": false, "bSortable": false }
        ],
        "oLanguage": {
                "sProcessing":   "Wait please...",
                "sZeroRecords":  "No ids found.",
                "sInfo":         "Ids from _START_ to _END_ of _TOTAL_ total",
                "sInfoEmpty":    "Ids from 0 to 0 of 0 total",
                "sInfoFiltered": "(filtered from _MAX_ total)",
                "sInfoPostFix":  "",
                "sSearch":       "Search:",
                "sUrl":          "",
                "oPaginate": {
                        "sFirst":    "<<",
                        "sLast":     ">>",
                        "sNext":     ">",
                        "sPrevious": "<"
                },
                "sLengthMenu": 'Display <select>' +
                        '<option value="10">10</option>' +
                        '<option value="20">20</option>' +
                        '<option value="50">50</option>' +
                        '<option value="100">100</option>' +
                        '<option value="-1">all</option>' +
                        '</select> ids'
        }
} );

Answer 1

Примечание. Это было для более ранней версии таблиц данных, см. этот ответ для таблиц данных jQuery v1.10 и выше.

---

Это изменит поведение поля ввода так, чтобы оно фильтровалось только тогда, когда нажата клавиша возврата или если в поиске есть по крайней мере 3 символа:

$(function(){
  var myTable=$('#myTable').dataTable();

  $('.dataTables_filter input')
    .unbind('keypress keyup')
    .bind('keypress keyup', function(e){
      if ($(this).val().length < 3 && e.keyCode != 13) return;
      myTable.fnFilter($(this).val());
    });
});

Вы можете видеть, что это работает здесь: http://jsbin.com/umuvu4/2. Я не знаю, почему люди dataTables связывают и нажатие клавиш, и keyup, но я переопределяю их обоих, чтобы они оставались совместимыми, хотя я думаю, что keyup достаточно.

Надеюсь, это поможет!

Answer 2

Решение для версии 1.10 -

После того, как я посмотрел здесь полный ответ и не нашел его, я написал это (используя код из документации и несколько ответов здесь).

Приведенный ниже код работает для задержки поиска до тех пор, пока не будет введено не менее 3 символов:

// Call datatables, and return the API to the variable for use in our code
// Binds datatables to all elements with a class of datatable
var dtable = $(".datatable").dataTable().api();

// Grab the datatables input box and alter how it is bound to events
$(".dataTables_filter input")
    .unbind() // Unbind previous default bindings
    .bind("input", function(e) { // Bind our desired behavior
        // If the length is 3 or more characters, or the user pressed ENTER, search
        if(this.value.length >= 3 || e.keyCode == 13) {
            // Call the API search function
            dtable.search(this.value).draw();
        }
        // Ensure we clear the search if they backspace far enough
        if(this.value == "") {
            dtable.search("").draw();
        }
        return;
    });

Answer 3

Почему бы не попробовать эту расширенную версию ответа Stony:)

var searchWait = 0;
var searchWaitInterval;
$('.dataTables_filter input')
.unbind('keypress keyup')
.bind('keypress keyup', function(e){
    var item = $(this);
    searchWait = 0;
    if(!searchWaitInterval) searchWaitInterval = setInterval(function(){
        if(searchWait>=3){
            clearInterval(searchWaitInterval);
            searchWaitInterval = '';
            searchTerm = $(item).val();
            oTable.fnFilter(searchTerm);
            searchWait = 0;
        }
        searchWait++;
    },200);

});

Это задержит поиск до тех пор, пока пользователь не перестанет печатать.

Надеюсь, это поможет.

Answer 4

Вот как справиться с изменением API в версии 1.10

var searchbox = $('#promogrid_filter input');
var pgrid = $('#promogrid').DataTable();

//Remove default datatable logic tied to these events
searchbox.unbind();

searchbox.bind('input', function (e) {
   if(this.value.length >= 3) {
      pgrid.search(this.value).draw();
   }
   if(this.value == '') {
      pgrid.search('').draw();
   }
   return;
});

Answer 5

Чтобы вызвать серверный вызов после того, как пользователь ввел минимальные символы в поле поиска, вы можете следовать предложению Аллана :

настроить fnSetFilteringDelay () функция API подключаемого модуля для добавления дополнительного условия к длине строки перед установкой фильтра, также учитывая ввод пустой строки для очистки фильтра

для не менее 3 символов просто измените строку # 19 в подключаемого модуля на:

if ((anControl.val().length == 0 || anControl.val().length >= 3) && (sPreviousSearch === null || sPreviousSearch != anControl.val())) {

Answer 6

Вот плагин-подобный скрипт, расширяющий таблицы данных.

jQuery.fn.dataTableExt.oApi.fnSetFilteringEnterPress = function ( oSettings ) {
    var _that = this;

    this.each( function ( i ) {
        $.fn.dataTableExt.iApiIndex = i;
        var
            $this = this, 
            oTimerId = null, 
            sPreviousSearch = null,
            anControl = $( 'input', _that.fnSettings().aanFeatures.f );

            anControl
              .unbind( 'keyup' )
              .bind( 'keyup', function(e) {

              if ( anControl.val().length > 2 && e.keyCode == 13){
                _that.fnFilter( anControl.val() );
              }
        });

        return this;
    } );
    return this;
}

использование:

$('#table').dataTable().fnSetFilteringEnterPress();

Answer 7

Моя версия таблицы данных 1.10.10

Я немного изменил вещи, и теперь это работает. Итак, я делюсь, потому что было трудно заставить его работать для версии 1.10.10. Спасибо cale_b, Стоуни и Сэму Барнсу. Посмотрите на код, чтобы увидеть, что я сделал.

    var searchWait = 0;
    var searchWaitInterval;
    $('.dataTables_filter input')
    .unbind() // leave empty here
    .bind('input', function(e){ //leave input
        var item = $(this);
        searchWait = 0;
        if(!searchWaitInterval) searchWaitInterval = setInterval(function(){
            if(searchWait >= 3){
                clearInterval(searchWaitInterval);
                searchWaitInterval = '';
                searchTerm = $(item).val();
                oTable.search(searchTerm).draw(); // change to new api
                searchWait = 0;
            }
            searchWait++;
        },200);

    });

Answer 8

Это работает для DataTables 10.0.4:

var table = $('#example').DataTable();

$(".dataTables_filter input")
    .unbind()
    .bind('keyup change', function(e) {
        if (e.keyCode == 13 || this.value == "") {
            table
                .search(this.value)
                .draw();
        }
    });

JSFiddle

Answer 9

Вы можете отложить ajax-вызов на сервер этим

var search_thread = null;
    $(".dataTables_filter input")
        .unbind()
        .bind("input", function(e) { 
            clearTimeout(search_thread);
            search_thread = setTimeout(function(){
                var dtable = $("#list_table").dataTable().api();
                var elem = $(".dataTables_filter input");
                return dtable.search($(elem).val()).draw();
            }, 300);
        });

Этот код прекратит вызов ajax, если время между нажатием клавиши меньше 300 мс. Таким образом, при вводе слова будет выполняться только один вызов ajax, и только когда вы прекратите вводить текст. Вы можете «играть» с параметром задержки (300), чтобы получить более или менее задержку

Answer 10

Используйте это

   "fnServerData": function (sSource, aoData, fnCallback, oSettings) {

            if ($("#myDataTable_filter input").val() !== "" && $("#myDataTable_filter input").val().length < 3)
                return;
            oSettings.jqXHR = $.ajax({
                "dataType": 'json',
                "timeout":12000,
                "type": "POST",
                "url": sSource,
                "data": aoData,
                "success": fnCallback
            });
        }