Cannot display with latest data after ajax call

khanhminh

I have Search button which not a part of table.
When I click on Seatch button, the ajax call will be called and returned json data format.
It's okie to use api to display data

 success: function(data, status) {
           var datatable = $('#transactions_tb').DataTable();
            result = jQuery.parseJSON(data)
            datatable.clear();

            datatable.rows.add(result.data);
            datatable.rows().data().length=0
            datatable.draw();
        },

But in case the "serverSide": true, the display not work. Can you please give me an idea to fix the issue. Thank you and appreciate.

kthorngren

But in case the "serverSide": true

Do you have serverSide: true configured? If so then using an external ajax call is not how server side processing works. This doc explains the protocol:
https://datatables.net/manual/server-side

If using server side processing then you should use the search() API for the search. Doing this will use the server side protocol, assuming your server script conforms to the protocol.

datatable.rows().data().length=0

What are you trying to do with this line?

datatable.rows.add(result.data);

Can you post an example of what is returned, copied from the browser's developer tools?

Do you get alert messages or errors in your browser's console?

What is your Datatables config?

Kevin

khanhminh

I tried with many solution but unlucky.

khanhminh

var table = $('#transactions_tb').DataTable({
        "searching": false,
        "ordering": false,
        "pagingType": "numbers",
        "bLengthChange": false,
        "serverSide": true,
        "columnDefs": [
            { "width": "1%", "targets": 0 },
            { "width": "80%", "targets": 0 },
            { "width": "9%", "targets": 0 },
            { "width": "10%", "targets": 0 },
        ],
        "ajax": "{% url 'search_transactions' %}",
        ajax: {
        url: "{% url 'search_transactions' %}",
        dataFilter: function(data){
            var json = jQuery.parseJSON( data );
            json.recordsTotal = json.recordsTotal;
            json.recordsFiltered = json.recordsFiltered;
            json.data = json.data;
            return JSON.stringify( json ); // return JSON string
        }
    }
}

$("#trans_btn_filter").click(function() {
        var datatable = $('#transactions_tb').DataTable();
        $.ajax({
            url: '{% url 'search_transactions' %}',
            type: 'POST',
            data: {
                csrfmiddlewaretoken: window.CSRF_TOKEN,
                paid_time_from: $("#date_order_from_input").val(),
                paid_time_to: $("#date_order_to_input").val(),
                earning_time_from: $("#date_pay_from_input").val(),
                earning_time_to: $("#date_order_to_input").val(),
                trade_id: $("#trans_trade_id").val(),
                page_index: 1
            },
            success: function(data, status) {
                result = jQuery.parseJSON(data)
                console.log(result)
                console.log(datatable)
                datatable.clear();
                datatable.add(result.data).draw();
            },
            error: function(status) {
            }
        });
    })

The return data having format as:

{
    "draw": 1,
    "recordsTotal": 57,
    "recordsFiltered": 57,
    "data": [
        {
            "DT_RowId": "row_3",
            "DT_RowData": {
                "pkey": 3
            },
            "first_name": "Angelica",
            "last_name": "Ramos",
            "position": "System Architect",
            "office": "London",
            "start_date": "9th Oct 09",
            "salary": "$2,875"
        },
        {
            "DT_RowId": "row_17",
            "DT_RowData": {
                "pkey": 17
            },
            "first_name": "Ashton",
            "last_name": "Cox",
            "position": "Technical Author",
            "office": "San Francisco",
            "start_date": "12th Jan 09",
            "salary": "$4,800"
        },
        ...
    ]
}

It works when serverSide = false. So I think when serverSide is set to true, we need to bind the parameters such as recordsTotal. recordsFiltered to datatable. I tried but not work.

khanhminh

Many example binding data from initialization of table. My case is external and should use api to bind data. It's really rare example about that.

kthorngren

Server Side Processing does not work with rows.add(). Once you use draw() Datatables will send a request to the server for the current page. Using a separate ajax call won't work with server side processing. You will probably see two ajax requests with your click event; one that is from the ajax request in the function and one that is from Datatables.

My suggestion is to use ajax.data as a function to send the parameters you have in your separate ajax request. The docs have an example. The response will need to be in the format that server side processing supports.

You can then simply use draw() in the click event function. You may need to add an additional parameter that is a flag to control whether to use the parameters sent or to use normal Datatables processing in your server script.

Kevin

khanhminh

Thanks for your valuable answer.

My case is call external ajax when Search button click and bind data again to table. Is it possible on this case when serverSide is True?

So can you please give me a details example about that?

khanhminh

I think when we use external ajax call, we have to use api to binding again to datatable.

kthorngren

Unfortunately I don't have a server side script I can build an example from. But I think you will want to do something close to this:

var table = $('#transactions_tb').DataTable({
        "searching": false,
        "ordering": false,
        "pagingType": "numbers",
        "bLengthChange": false,
        "serverSide": true,
        "columnDefs": [
            { "width": "1%", "targets": 0 },
            { "width": "80%", "targets": 0 },
            { "width": "9%", "targets": 0 },
            { "width": "10%", "targets": 0 },
        ],
        "ajax": "{% url 'search_transactions' %}",
        ajax: {
        url: "{% url 'search_transactions' %}",

        // `type` and `data` are moved from the click event
        type: 'POST',
        data: {function ( d ) {
                d.csrfmiddlewaretoken: window.CSRF_TOKEN,
                d.paid_time_from: $("#date_order_from_input").val(),
                d.paid_time_to: $("#date_order_to_input").val(),
                d.earning_time_from: $("#date_pay_from_input").val(),
                d.earning_time_to: $("#date_order_to_input").val(),
                d.trade_id: $("#trans_trade_id").val(),
                d.page_index: 1
            }
        },
       

        dataFilter: function(data){
            var json = jQuery.parseJSON( data );
            json.recordsTotal = json.recordsTotal;
            json.recordsFiltered = json.recordsFiltered;
            json.data = json.data;
            return JSON.stringify( json ); // return JSON string
        }
    }
}
 
$("#trans_btn_filter").click(function() {
        var datatable = $('#transactions_tb').DataTable();

        // Send SSP draw request to server
        datatable.draw();
    })

I'm not sure what the dataFilter function is doing. Doesn't look like it is changing anything.

You will need to work out a way to tell the server script whether to use the normal SSP processing or to use the parameters set in the data function.

Kevin