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

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

TanviPTanviP Posts: 6Questions: 2Answers: 0

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!

Answers

  • colincolin Posts: 15,118Questions: 1Answers: 2,583

    Can you post how you declare the DataTable, please.

    Colin

  • TanviPTanviP Posts: 6Questions: 2Answers: 0
    edited April 2021

    Hi Colin, please see below:

        var table = $("#myTable").DataTable({
         "lengthMenu": [
           [10, 25, 50, -1],
           [10, 25, 50, "All"]
         ]
        });
    
    $(".paginate_button").on("click", function() {
    
               makeRequest();
    
        });
    
    
  • kthorngrenkthorngren Posts: 20,150Questions: 26Answers: 4,736

    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

  • TanviPTanviP Posts: 6Questions: 2Answers: 0
    edited April 2021

    @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

  • colincolin Posts: 15,118Questions: 1Answers: 2,583

    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

  • TanviPTanviP Posts: 6Questions: 2Answers: 0

    @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

  • TanviPTanviP Posts: 6Questions: 2Answers: 0

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

  • kthorngrenkthorngren Posts: 20,150Questions: 26Answers: 4,736

    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

This discussion has been closed.