table.add.rows() not updating the datatable from AJAX response from Python Flask

TanviP

I'm trying to refresh the datatable with the response received after AJAX POST call. However it doesn't add the data to datatable but creates empty rows that are the exact same number as in the response of the AJAX call.

I'm new to this and referred to https://datatables.net/reference/api/rows.add() to build the table refresh part

My AJAX response is as follows (using json.dumps in Flask)-

[{"name": "XYZ", "branch": "main", "city": "Tokyo", "state": "P3", "country": "Japan", "pin": "110011", "landmark": "L1"},{"name": "XYZ", "branch": "main", "city": "Tokyo", "state": "P3", "country": "Japan", "pin": "110011", "landmark": "L2"},...{"name": "XYZ", "branch": "main", "city": "Tokyo", "state": "P3", "country": "Japan", "pin": "110011", "landmark": "L30"}]

My code snippets are -

Flask

c_data = []
    for c in myData:
        c_data.append({
            'name': c[0],
            'branch': c[1],
            'city': c[2],
            'state': c[3],
            'country': c[4],
            'pin': c[5],
            'landmark': c[6],
            })
 
    return json.dumps(c_data)

jQuery

function makeRequest() {
var pageNum = table.hasOwnProperty('page') ? table.page.info().page : 1;
 if (pageNum > 0) {
        $.ajax({
        data: JSON.stringify({ "pageNum": pageNum }),
        dataType: "json",
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: "/my/url",
        success: function(data){
                console.log(jQuery.type(data));
                console.log(data);
                table.clear();
                table.rows.add(data);
                table.draw();
                }
        })

}

json.dumps(c_data) from Flask is received successfully in data part of success: function(data)

Any help to resolve this would be much appreciated. Thanks in advance!

colin

Can you post how you declare the DataTable, please.

Colin

TanviP

Hi Colin, please see below:

    var table = $("#myTable").DataTable({
     "lengthMenu": [
       [10, 25, 50, -1],
       [10, 25, 50, "All"]
     ]
    });

$(".paginate_button").on("click", function() {

           makeRequest();

    });

kthorngren

You are using Javascript objects (AKA dictionary in Python) so you will need to use columns.data to define your columns. See the data sources docs and this example. The example uses ajax instead of rows.add() but the concepts are the same for your solution.

Kevin

TanviP

@kthorngren I've tried this example but when I add any option to the DataTable initialization other than lengthmenu, the auto pagination doesn't work. What I'm trying to achieve is on click of a page number button, use that number to do some processing in my Flask, and return records that need to be displayed on the datatable. Which is why I'm using separate AJAX POST request, and adding rows received in its success response using rows.add

colin

when I add any option to the DataTable initialization other than lengthmenu, the auto pagination doesn't work

That would be unexpected, and also a different problem. As Kevin said, to see the data, you need to declare the columns in columns.data so DataTables knows where to get the data values. It definitely needs that. Once that's in place and working, we can look at why your paging doesn't work.

Colin

TanviP

@colin If I add the columns option then there's no pagination, and I don't have a page number to click on. The functionality I'm trying to implement is when a page number is clicked. So that's where I'm facing an issue with mapping the data to table

TanviP

I've even tried table.columns.adjust().draw() after table.rows.add(data) but it still doesn't draw the data.

kthorngren

If I add the columns option then there's no pagination, and I don't have a page number to click on.

Sounds like you are getting an error. Did you look at the browser's console for errors? Likely a syntax error due to not separating the options with a comma.

Here is an example using your sample data with rows.add() and columns.data:
http://live.datatables.net/gimedoxe/1/edit

Kevin