收到 AJAX POST 响应后 DataTable 未刷新 onclick

Question

My problem statement is as below:

Display 10 rows per page on DataTable. When the user clicks on the next page number, use that number in flask to calculate row_count. Select rows from database that are equal to the above row_count. Display these selected rows on DataTable.

Following code gives me json response on console.log, but my DataTable is not getting refreshed.

JQuery snippet:

$(document).ready(function() {
       var buttonCommon = {
        exportOptions: {
            format: {
                body: function ( data, row, column, node ) {
                                return data;
                                }
                            }
                    }
            };

var table = $("#myTable").DataTable({
 "lengthMenu": [
   [10, 25, 50, -1],
   [10, 25, 50, "All"]
 ],
 drawCallback: function() {
   $(".paginate_button", this.api().table().container())
     .on("click", function() {

       var pageNum= table.page.info().page;

        $.ajax({
            data: JSON.stringify({ "pageNum": pageNum }),
            dataType: "json",
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: "/my/url",
            success: function(data){
                data = JSON.parse(data);
                $("#myTable").DataTable({
                    data: data.data,
                    columns: [
                            { "data": "name" },
                            { "data": "branch" },
                            { "data": "city" },
                            { "data": "state" },
                            { "data": "country" },
                            { "data": "pin" },
                            { "data": "landmark" },
                            ]
                    })
                }
            })
        })
    }   
})

Flask snippet:

@my_api.route('/url', methods=['POST', 'GET'])
def myfunc():

    conn = get_pgsql_conn_obj()
    cursor = conn.cursor()

    if request.get_json():
        number = request.json['pageNum']
        start_num = number * 20 + 1
        stop_num = start_num + 9

        select_sql = "select name, branch, city, state, country, pin, landmark from (select name, branch, city, state, country, pin, landmark, row_number() over (order by pin) as rnum from table) as r where r.rnum <= {}".format(stop_num)
     
        cursor.execute(select_sql)

        myData = cursor.fetchall()
    
        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)

    elif request.get_json() is None:

        number = 0
        select_sql = "select name, branch, city, state, country, pin, landmark from (select name, branch, city, state, country, pin, landmark, row_number() over (order by pin) as rnum from table) as r where r.rnum = 1 or r.rnum <= 20"
        cursor.execute(select_sql)

        myData = cursor.fetchall()


        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 render_template('my.html', c_data=c_data)

    else:
    *Do something else*

I can see the response in the Network Response something like below:

[{"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"}]

EDIT:

I've tried the following 2 solutions, but still not able to get the datatable refreshed:

Solution 1:

 var table = $("#myTable").DataTable({
 "lengthMenu": [
   [10, 25, 50, -1],
   [10, 25, 50, "All"]
 ],
 "columnDefs": [{
    "defaultContent": "-",
    "targets": "_all"
 }],
 drawCallback: function() {
   $(".paginate_button", this.api().table().container())
     .on("click", function() {

       var pageNum= table.page.info().page;

        $.ajax({
            data: JSON.stringify({ "pageNum": pageNum }),
            dataType: "json",
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: "/my/url",
            success: function(data){
                    console.log(data);
                    table.clear();
                    table.rows.add(data);
                    table.draw();
                    }                
         });
     });
    }
});

This gives me first 20 records with pagination, ie 10 records per page. On clicking page number 2, it returns an array like below on network response:

[{"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"}]

But there's no change to the datatable.

Solution 2 (As suggested by Mtxz):

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


$(".paginate_button", this.api().table().container())
     .on("click", function() {

       makeRequest();

});

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){
                    var new_data = JSON.parse(data);
                    table.clear();
                    table.rows.add(new_data);
                    table.draw();
                    }
            })

    }

}

This gives me first 20 records with pagination, ie 10 records per page. On clicking page number 2, It gives me Uncaught SyntaxError: Unexpected token o in JSON at position 1 at JSON.parse ()

When I try without JSON.parse, it gives me DataTables warning: table id=objectTable - Requested unknown parameter '0' for row 0, column 0 , but returns an array like below on console log, clears the table data, and adds an extra page number 3 (response array has 30 records and length is set to 10 per page):

0: {"name": "XYZ", "branch": "main", "city": "Tokyo", "state": "P3", "country": "Japan", "pin": "110011", "landmark": "L1"} 1: {"name": "XYZ", "branch": "main", "city": "Tokyo", "state": "P3", "country": "Japan", "pin": "110011", "landmark": "L2"} 29: {"name": "XYZ", "branch": "main", "city": "Tokyo", "state": "P3", "country": "Japan", "pin": "110011", "landmark": "L30"}

Answer 1

From your script, it seems that your re-init your table with each click. What I would do:

1. Server-side processing - Datatable has an ajax parameter (check examples here and here ), and a table.ajax.reload(); reload method. It also has a ajax.url() to alter the query URL if you need to add query parameters. So you could directly add your API URL to your datatable instance, and use "server-side" processing. Your API sending the correct paginated JSON collection based on the parameters Datatable will add to the request. (I believe it's possible to customize the ajax request to add an authentication header or else). You should check all ajax.* related Datatable documentation pages, also google about "jquery datatable server-side processing PHP example" ( see ). It's the cleanest way if you want to the sorting, the search, and the pagination working with the remote data source, and of course NOT loading the entire set of data:).

2. From your script logic (using the Datatable data parameter)

• make a separate method that will handle the ajax call, with a page parameter. This method will return the $result ajax result in a variable
• on page load, and call this method with page 1 to get the ajax $result , and init your datatable with this $result

var table = $('#example').DataTable({data: jQuery.parseJSON($result), ...

• 2.1 on the ajax success handler, update the $result variable with new request-response, and call table.ajax.reload(); to refresh the datatable and redraw with new data. EDIT : I'm not sure that just using a variable as data source and refreshing will work (but the linked examples does, so it need further tests). I think you'll have to follow something like this to handle your pagination manually.

Still, it's only the pagination. And the search and sorting will only append in the paginated dataset. To have the full power of search, filtering, sorting without having to load the entire dataset onload: you need server-side processing. To handle the PHP side, you can simply put your API url as ajax parameter, and on your PHP side dump the entire $_GET variable while changing sorting, filtering, search on the frontend. So you'll see how Datatable handles the filtering parameters, and be able to adapt your database queries to take those parameters in consideration, along with pagination: server-side processing.

3. Examples:

This post is about updating the dataset with new data and can be adapted to your needs. This post and the related comments, as it's a similar case (and it's this example that also uses data parameter with a custom ajax handling, that the refresh is also working in this case, with a variable for data )

Here is something I've NOT tested that could inspire you:

 $(document).ready(function() { var buttonCommon = { exportOptions: { format: { body: function (data, row, column, node) { return data; } } } }; //init table with empty data var table = $("#myTable").DataTable({ "lengthMenu": [ [10, 25, 50, -1], [10, 25, 50, "All"] ], data: [] }); //on button click $(".paginate_button", this.api().table().container()).on("click", function () { makeRequest(); //this is from the example where ajax.reloads works when the data is a variable that is updated by a custom ajax handler //From this example, it seems that the ajax reload also works when the data is a variable - todo make some test //table.ajax.reload(); }) //make async request function makeRequest() { var pageNum = table.hasOwnProperty('page')? table.page.info().page: 1; //if table is not init yet (first call) use page 1 $.ajax({ data: JSON.stringify({ "pageNum": pageNum }), dataType: "json", type: "POST", //you could use GET and?page=1 parameter contentType: "application/json; charset=utf-8", url: "/my/url", success: function(data){ var new_data = JSON.parse(data); table.clear(); table.rows.add(new_data); table.draw(); } }) } });