DataTables ajax.reload() not working

DataTables ajax.reload() not working

reinrein Posts: 12Questions: 3Answers: 0

I am using server-side DataTable paging. This works fine on the first click of the button, however on the following button clicks, the ajax.reload isn't working and the ajax data valeus doesn't change. The values passed on the first click are still the values passed on the next calls. Please help me resolve this issue. Below is my sample code:

$(function(){
    $("#submitBtn").on("click",function(){
    displayData();
    });
});
    ////////////////////
    // Table Header Contents
    ////////////////////
    var tblReport={};
    var table;
    var tableCont = {
    "db_columns" : [ 
    "TYPE", "USER_ID", "USER_NAME", "DATE_ACCESS", "SESSION_ID", "PROJECT"
    ]
    };
    var obj = new Object();
    ////////////////////
    // Create Table
    ////////////////////
    function createTbl(wrapper){
    wrapper.empty();
    wrapper.append(
    $("<table/>").append($("<thead/>"), $("<tfoot/>"))
    );
    // row header
    var row = $("<tr/>");
    $.each(tableCont["db_columns"], function(i, val) {
    row.append($("<th/>").text(val.replace(/\_/g," ")));
    });
    $("table",wrapper).find("thead, tfoot").append(row);
    return $("table",wrapper);
    }

    ////////////////////
    // Initialize Datatables
    ////////////////////
    function displayData(){
    var wrapper = $(".tbl-wrapper");

    var dataObj = new Object();
    dataObj.cols = tableCont["db_columns"];

    var sDate = $("#startDate").val();
    var eDate = $("#endDate").val();

    if($.isEmptyObject(tblReport)){
    //** create table
    tblReport = createTbl(wrapper);

    //** assign datatable columns
    var columns = [];
    $.each(tableCont["db_columns"],function(k,val){
    columns.push({"data" : val});
    });

    //** initialize datatable
    table = tblReport.DataTable({
    "order": [[3, "desc"]],
    "lengthMenu": [ [20, 50, 100, 200], [20, 50, 100, 200] ],
    "serverSide": true,
    "processing" : true,
    "deferRender": true,
    "destroy": true,
    "ajax": { 
    "url" : "getTableData", 
    "type": "POST",
    "data": { jsonData : JSON.stringify(dataObj),
    startDate: sDate,
    endDate: eDate},
    "cache": false
    },
    "columns" : columns,
    "columnDefs": [
    {"data": undefined , "defaultContent": "", "targets": "_all"}
    ],
    "drawCallback" : function(){
    //** re-adjust filters WIDTH
    },
    "initComplete": function(){
    //** initialize COLUMN FILTERS
    }
    });

    //** reload page on DATATABLE ERROR
    $.fn.dataTable.ext.errMode = function (error) { 
    alert(error.toString());
    //window.location.reload(true);
    };

    }else{
        table.ajax.reload();
    }
}

Thank you so much!

Answers

  • allanallan Posts: 63,516Questions: 1Answers: 10,472 Site admin

    That looks like it should work as far as I can see. Can you link to a page showing the issue so I can help to debug it please.

    Allan

  • reinrein Posts: 12Questions: 3Answers: 0
    edited March 2018

    Thanks for your response Allan! I already got it working. The problem was with the ajax data. I used the code below and it finally worked.
    "data": function ( d ) { d.jsonData = JSON.stringify(dataObj); d.startDate = $("#startDate").val(); d.endDate = $("#endDate").val(); }

This discussion has been closed.