datatables глобальный поиск при нажатии клавиши ввода вместо любого нажатия клавиши

Я использую Datatables плагин jQuery. Я использую функции обработки на стороне сервера для моего проекта ASP.Net.

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

Это становится более неприятным, когда данные для фильтрации являются большими.

Есть ли способ или способ вызова метода поиска при нажатии клавиши ввода, а не на любом нажатии клавиши?

Ответ 1

Что нужно сделать, это просто отсоединить обработчик события нажатия клавиши, который DataTables помещает в поле ввода, а затем добавить свой собственный, который будет вызывать fnFilter при обнаружении ключа возврата (keyCode 13).

$("div.dataTables_filter input").keyup( function (e) {
    if (e.keyCode == 13) {
        oTable.fnFilter( this.value );
    }
} );

еще

$(document).ready(function() {
   var oTable = $('#test').dataTable( {
                    "bPaginate": true,
                "bLengthChange": true,
                "bFilter": true,
                "bSort": true,
                "bInfo": true,
                    "bAutoWidth": true } );
   $('#test_filter input').unbind();
   $('#test_filter input').bind('keyup', function(e) {
       if(e.keyCode == 13) {
        oTable.fnFilter(this.value);   
    }
   });     
} );

Ответ 2

Я тоже попробовал код Techie. Конечно, я также получил сообщение об ошибке. fnFilter is not a function. Собственно, заменив строку oTable.fnFilter(this.value); через oTable.search( this.value).draw(); выполнял бы эту работу, но в моем случае функции unbind/bind выполнялись до того, как моя инициализированная таблица на стороне сервера была инициализирована. Поэтому я помещаю функции initComplete/bind в initComplete обратного вызова initComplete, и все работает нормально:

$(document).ready(function() {
    var oTable = $('#test').dataTable( {
        "...": "...",
        "initComplete": function(settings, json) {
            $('#test_filter input').unbind();
            $('#test_filter input').bind('keyup', function(e) {
                if(e.keyCode == 13) {
                    oTable.search( this.value ).draw();
                }
            }); 
        }
    });    
});

Ответ 3

Вот как это сделать с изменением api в версии 1.10

    //prevents form submissions if press ENTER in textbox
    $(window).keydown(function (event) {
        if (event.keyCode == 13) {
            event.preventDefault();
            return false;
        }
    });

    var searchbox = $('#ordergrid_filter input');
    searchbox.unbind();
    searchbox.bind('keyup', function (e) {
        if (e.keyCode == 13) {
            ogrid.search(this.value).draw();
        }
    });

    var uitool = '';
    searchbox.on("mousedown", function () {
        uitool = 'mouse';
    });
    searchbox.on("keydown", function () {
        uitool = 'keyboard';
    });

    //Reset the search if the "x" is pressed in the filter box
    searchbox.bind('input', function () {
        if ((this.value == "") && (ogrid.search() != '') && (uitool == 'mouse')) {
            ogrid.search('').draw();
            return;
        }
    });

Ответ 4

Я делаю это в Datatables (v1.10.15). Я также препятствую обратному пространству и кнопке удаления отправлять запрос на поиск, если вход был пуст.

$.extend( $.fn.dataTable.defaults, {
    "initComplete": function(settings, json) {
        var textBox = $('#datatable_filter label input');
        textBox.unbind();
        textBox.bind('keyup input', function(e) {
            if(e.keyCode == 8 && !textBox.val() || e.keyCode == 46 && !textBox.val()) {
                // do nothing ¯\_(ツ)_/¯
            } else if(e.keyCode == 13 || !textBox.val()) {
                table.search(this.value).draw();
            }
        }); 
    }
});

Ответ 5

Наконец, он работал таким образом

var oTable = $('#table-name').dataTable({
    processing: true,
    serverSide: true,
    ajax: "file.json",
    initComplete: function() {
        $('#table-name_filter input').unbind();
        $('#table-name_filter input').bind('keyup', function(e) {
            if(e.keyCode == 13) {
                oTable.fnFilter(this.value);
            }
        });
    },
    ....

ура

Ответ 6

Вы можете использовать с jQuery.

// get the global text
var globalSearch = $("#txtGlobal").val();

// then put them in the search textboxes
$("input[type='search']").val(globalSearch);
// trigger keyup event on the datatables
$("input[type='search']").trigger("keyup.DT");

$("input[type='search']") получит все текстовые поля поиска.

Ответ 7

Вот как мне удалось это сделать:

$(document).on('focus', '.dataTables_filter input', function(e) {

    $(this).unbind().bind('keyup', function(e) {
        if(e.keyCode === 13) {
            oTable.search( this.value ).draw();
        }
    });

});