To send another ajax request to search in serverside processing

nayanadas

Right now, i'm using server side processing but when I enter any character in table search box, the same request is sending to back-end and table gets reloaded without filtering, it seems like the request is getting triggered automatically. So, how can I send a different ajax request for searching in table. I'm using the following code:

var table = $("#tableid").DataTable({
    "serverSide": true,
    "searching": true,
    "responsive": true,
    "ajax": function (data, callback, settings) {
        var out = [];
        $.ajax({
            type: "POST",
            async: false,
            url: "/getTableData",
            data: "parameter=" + params,
            success: function (data) {
                console.log("success:data: " + data);
                out = data;
            }
        });
        callback({
            "draw": out.draw,
            "aaData": out,
            "recordsTotal": numOfRecords,
            "recordsFiltered": numOfRecords
        });
    },
    "ordering": true,
    "deferRender": true,
    "scroller": {
        "loadingIndicator": true,
        "trace": true,
    },
    "dom": "rtiS",
    "scrollCollapse": true,
    "scrollX": true,
    "scrollY": 400,
    "bProcessing": true,
    "bDestroy": true,
    "bAutoWidth": true,
    "scrollCollapse": true,
    "dom": 'Bfrtip',
    "buttons": [
        'copy',
        'csv',
        'colvis',
        "pdf",
        "json"
    ]
});

Is it possible to do send separate ajax request for filtering table, using following modified code from https://datatables.net/reference/event/search

$("#tableid").on('search.dt', function (event) {
    var searchkeyword = $('#tableid :input').val();
    $.ajax({
        type: "POST",
        async: false,
        url: "/getFilteredData",
        data: "parameter=" + searchkeyword,
        success: function (data) {
            console.log("success:data: " + data);
            out = data;
        }
    });
});

or do we have a another property "search" to handle that function? Please help me with a solution.

Thank you.

colin

Hi @nayanadas ,

If you're using serverSide, the protocol is discussed here and your server needs to respond with that. There isn't a separate request for search or ordering or paging, as the server needs to be aware of all of those properties.

Cheers,

Colin

nayanadas

Hi @colin , thank you for your answer, but I don't quite understand, can you please explain in detail. How the ajax request "getTableData" get triggered automatically whatever characters entered to search input field. To handle the "getTableData" request, i'm using Spring(java) MVC controller, and I'm already sending a JSON data as a paramter. So, how could I send request with search value as a parameter along with my existing parameter?

colin

Hi @nayanadas ,

The best is to look at the server-side example here. If you pull up the browser's developer tools and go to the network tab, you can see what the client is sending to the server (headers tab), and what is being received (response tab). You'll see there how the interaction behaves,

Cheers,

Colin