Home / Questions / 20899
Accepted
JuankGlezz
Asked: 2020-08-18 14:49:24 +0800 CST 2020-08-18 14:49:24 +0800 CST

Send ajax request to datatables after stop typing

  • 772

I need to make a request ajaxto my controller after I have typed the search words in my inputde datatables.

The point I'm getting at is that it doesn't do the prompts for each character typed until a little time has passed since the last key was pressed.

This is my code how the table is declared

var table = $('#tableComprobantes').dataTable({
    "order": [[5, "desc"]],
    "sDom": "<'row'<'col-xs-6'l><'col-xs-6'f>r>t<'row'<'col-xs-6'i><'col-xs-6'p>>",
    "sPaginationType": "sangoma",
    "oLanguage": {
    "sLengthMenu": "_MENU_ comprobantes por página",
    "sInfo": "Mostrando _START_ a _END_ de _TOTAL_ comprobantes",
    "sInfoEmpty": "Sin comprobantes a mostrar",
    "sInfoFiltered": "(Filtrado de _MAX_ comprobantes totales)",
    "sSearch": "Filtro:",
        "sZeroRecords": "Sin comprobantes encontrados"
    },
    "bProcessing": true,
    "bServerSide": true,
    "sAjaxSource": "/Portal/listComprobantes",
    "fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
        $('td:eq(7)', nRow).attr('align', 'center');
        $('td:eq(8)', nRow).attr('align', 'center');
        return nRow;
    },
    "aoColumns": [
        { "bSortable": false },
        { "bSortable": true },
        { "bSortable": true },
        { "bSortable": true },
        { "bSortable": true },
        { "bSortable": true },
        { "bSortable": true },
        { "bSortable": false },
        { "bSortable": false },
        { "bSortable": true }
    ]
});
jquery

2 Answers

  1. You can use the option searchDelay(available as of DataTables version 1.10.3). This is a (proper) translation of the description on that web page:

    The global lookup included in DataTABLEs (by default at the top right of each DataTable) will instantly lookup the table with each keystroke in client mode and reduces the autocall frequency to 400 milliseconds when rendering in server mode. This frequency of calling ( throttling ) can be controlled using the parameter searchDelayin both client-side and server-side processing.

    [...]

    The value given to searchDelaywill be in milliseconds (mS).

    So to use searchDelay, you would just have to add a new option when creating the DataTable. For example:

    var table = $('#tableComprobantes').dataTable({
    ....
    searchDelay: 500,
    ....
});

    That will cause it to wait half a second (500 milliseconds) before making the AJAX search request to the server.

    • 2
  2. Best Answer

    You can do it completely as you want in the following way:

    First with unbind you remove the default event of the filter (the one for each click).

    $('#x_filter input').unbind(); // 'x' es el nombre de tu tabla

    And then you simply add the filter to it by pressing enter:

    $('#x_filter input').bind('keyup', function(e) {
   if(e.keyCode == 13) {
   table.fnFilter(this.value);  // 'table' es la tabla, que has de tener iniciada.
}
    • 2