$(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