How to refresh DataTable and parse JSON response is received from Flask

TanviP

$(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" },
                            ]
                    })
                }
            })
        })
    }   
})`

What I'm trying to do is -
1. Display first 20 records (10 per page) when page is first loaded.
2. When the user clicks on page number 2, the page number is sent to flask for fetching more next set of records from database
3. Getting the next set of records (total 30 records) as in JSON format 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"}]

However I'm unable to refresh/ reload the DataTable and parse the JSON to it.

I'm new to DataTables and Flask and would really appreciate any help to resolve this!!

Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide

kthorngren

Datatables has a paging protocol, described here, that handles server side paging, filtering and sorting. You will need to create or find a server script that follows the protocol. Not sure if there are any third party Flask apps that support Datatables server side processing. There are a few for Django.

The first step s to determine if you need server side processing. Take a look at this FAQ for some basic info. If you can you should use client side processing as all the functions are handled by Datatables in the client. Take a look at the examples page. You will find both client side and server side processing examples.

Maybe your server needs to use the page parameter you are sending. In this case you will need to restructure your code. First problem is you don't want to create event handlers within callback functions as that will add the click event handler each time drawCallback runs. You may want to create your own previous and next buttons as the builtin buttons rely on knowing the number of rows/pages in the table. See this example from this thread for a basic idea of how to fetch the data using jQuery ajax.

Hope this gets you started. Please post any questions.

Kevin