Cannot reinitialise JQuery DataTable

panjo picture panjo · Sep 17, 2012 · Viewed 67.1k times · Source

I'm using jquery datatables to display data inside grid. On init page load script take DateTime.Today and process them further, problem is after init page load, when I'm trying to take users input date for further process. I'm having following error.

DataTables warning (table id = 'dataTable'): Cannot reinitialise DataTable. To retrieve the DataTables object for this table, pass no arguments or see the docs for bRetrieve and bDestroy

function getDate() {
    var date = $('input[name="myDate"]').val();
    return date;
}

$('#myDate').click(updateDate);

function updateDate() { 
    $('#dataTable').dataTable({
        "bServerSide": true,
        "sAjaxSource": "/Home/Ajax",
        "fnServerParams": function (aoData) {
            var date = getDate();
            aoData.push({ "name": "myDate", "value": date });
        },
        //... there's more
}

updateDate();

Script is put on the bottom of the page.

Answer

user1565195 picture user1565195 · Sep 17, 2012

Try adding "bDestroy": true to the options object literal, e.g.

$('#dataTable').dataTable({
    "bServerSide": true,
    ....
    "bDestroy": true
});