Reintialize data table workaround

jimkiely

I have a data table in a panel that is initialized when you click a button. The data table initializes and shows on first attempt after that I get the "3. Warning: Cannot reinitialize Data Table" error. So I'm trying to check if the data table is initialized and then either reload it or initialize it.

This code produces an error that says, Unable to get property 'ajax' of undefined or null reference. On the second line below. What is the best way to handle this?

if ($.fn.dataTable.isDataTable('#tblPartApplication')) {
tblPartApplication.ajax.reload();
} else {
var tblPartApplication = $('#tblPartApplication').DataTable({
"destroy": true,
"ajax": function (data, callback, settings) { // Make the Ajax call ourselves
$.ajax({
url: "../../Search/GetPartApplicationDetail",
type: "POST",
dataType: "json",
data: {
draw: data.draw, // Needed for paging
start: data.start, // Needed for paging
length: data.length, // Needed for paging
partNumber: $('#partNumber').html(),
},
beforeSend: function (xhrObj) {
// Whatever
}
})
.done(function (data, textStatus, jqXHR) {

                // Callback function that must be executed when the required data
                // has been obtained.
                // That data should be passed into the callback as the only parameter.
                callback(data);
            })
            .fail(function (jqXHR, textStatus, errorThrown) {
                alert(errorThrown);
            })
            .always(function (data, textStatus, jqXHR) {
                // Whatever
            });
        },            
        "autoWidth": false,
        "fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
            $(nRow).addClass("parent");
            return nRow;
        },            
        "bPaginate": false,
        "columns": [
            {
                "title": '',
                "class": 'details-control',
                "orderable": false,
                "data": null,
                "defaultContent": '<img src="../../assets/images/details_open.png" />'
            },
            { "title": 'Year', "data": 'Year' },
            { "title": 'Make', "data": 'Make' },
            { "title": 'Model', "data": 'Model' },
            { "title": 'Axle', "data": 'Axle' },
            { "title": 'Pad Set', "data": 'PadSet' },
            { "title": 'Part List', "data": 'PartListId', 'visible': false }
        ]
    });
}

larsonator

If you are initializing the table every click, you have to make sure that the table is destroyed again before you reinitialize it.

http://datatables.net/reference/api/destroy()
this is super easy id you store your DataTable() instance in a variable.

    var table = $("#table").DataTable();
    table.destroy();

How ever, this can be done more efficiently, as when you use destroy, Datatables will strip all its tags and formatting, and then set it all up again. If there is no major changes to the table structure, its not worth doing this. you can how ever stop DataTables from loading data before you want it to:

http://datatables.net/reference/option/deferLoading

Initialise you table at the start, but at this option: deferLoading: true,

This is stop it from loading the data.

Then when you click your button, you can call DataTables().ajax.reload().

This will make an ajax call with a fresh set of variables.

Also, there is no need to run your own ajax call,
If the data in your table is relying on frequently changing data, you can override the ajax like so:

        ajax: {
        "url": base_url+'Builder/listSites',
        "data": function( d ) {
         d.partNumber = $("#partNumber").html();
         }
    },

Hope this helps