DataTables ajax.reload() not working

rein

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!

allan

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

rein

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(); }