Question posted in
You can find the official documentation here.

Jquery ajax – Datatables AJAX call not updating table data

I am trying to update my datatable from an AJAX call using PHP. I have a drop down list when selected will filtr the data. The data is being retrieved correctly but the table is not updating based on this data.

When the page is loaded, the data is being displayed fine no problems, it only when I try an dfilter the data.

Below is the initialisation of the datatable and ajax call

var table = $('#business-page-click-through-report').DataTable({
        dom: 'Bfrtip',
        buttons: [
            'csv', 'excel'
        ],
        ajax: {
            url: Wo_Ajax_Requests_File() + '?f=filter_click_through_report',
            type: 'POST',
            "data": function ( data ) {
                data.filter = $('#history option:selected').val();
            }
        },
        serverSide: true,
        //processing: true,
        serverMethod: 'post',
        'columns': [
            {data: 'page_title'},
            {data: 'module'},
            {data: 'post_title'},
            {data: 'site_destination'},
            {data: 'totalClicks'},
        ]
    });

Next when an onchange event occurs the following code is executed:

$('#history').on('change', function() {
        table.draw();

    } );

I run the returned json data though a validator and it’s all fine

{
"draw": 1,
"recordsTotal": 5,
"recordsFiltered": 5,
"aaData": [{
    "page_title": "Free Plan",
    "module": "jobs",
    "post_title": "Senior Web Developer / FUll Stack Developer",
    "site_destination": "https://www.seek.com.au/job/40560129?type=standard#searchRequestToken=c165897b-0be9-4734-84b1-040034173669",
    "totalClicks": "5"
}, {
    "page_title": "Gold Plan",
    "module": "jobs",
    "post_title": "gold plan test job",
    "site_destination": "http://www.google.com",
    "totalClicks": "1"
}, {
    "page_title": "Free Plan",
    "module": "products",
    "post_title": "fsdfsdfsd",
    "site_destination": "http://www.facebook.com",
    "totalClicks": "15"
}, {
    "page_title": "Free Plan",
    "module": "public-post",
    "post_title": "this is a public post for testing purposes",
    "site_destination": "/read-blog/381",
    "totalClicks": "2"
}, {
    "page_title": "Free Plan",
    "module": "events",
    "post_title": "this is an event for a business page",
    "site_destination": "/car-shows/this-is-an-event-for-a-business-page-3308",
    "totalClicks": "2"
}]

}

Not sure why the data is not being updated.

Any help will be appreciated

Thanks
Danny

Tags:

2

Answers


  1. 0

    It looks like you have got a cache problem. cache is true by default.

    Just try with the below code.

    var table = $('#business-page-click-through-report').DataTable({
        dom: 'Bfrtip',
        buttons: [
            'csv', 'excel'
        ],
        ajax: {
            url: Wo_Ajax_Requests_File() + '?f=filter_click_through_report',
            cache: false,
            type: 'POST',
            "data": function ( data ) {
                data.filter = $('#history option:selected').val();
            }
        },            
        serverSide: true,
        //processing: true,
        serverMethod: 'post',
        'columns': [
            {data: 'page_title'},
            {data: 'module'},
            {data: 'post_title'},
            {data: 'site_destination'},
            {data: 'totalClicks'},
        ]
    });

    After adding cache: false it should render your datatable with updated content.

    EDIT
    Try destroying the previous datatable before creating new one:

    var table = $('#business-page-click-through-report').DataTable();
table.clear().destroy(); // If this doesn't work, remove .clear() and try table.destroy();

    After this line run your actual datatable and ajax logic.

    var table = $('#business-page-click-through-report').DataTable({
        dom: 'Bfrtip',
        buttons: [
            'csv', 'excel'
        ],
        ajax: {
            url: Wo_Ajax_Requests_File() + '?f=filter_click_through_report',
            cache: false,
            type: 'POST',
            "data": function ( data ) {
                data.filter = $('#history option:selected').val();
            }
        },            
        serverSide: true,
        //processing: true,
        serverMethod: 'post',
        'columns': [
            {data: 'page_title'},
            {data: 'module'},
            {data: 'post_title'},
            {data: 'site_destination'},
            {data: 'totalClicks'},
        ]
    });
    Login or Signup to reply.
  2. 0

    you can simply destroy the datatable, and initialise when the time of ajax call success.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search