DataTables warning (table id = 'IDTableName'): Cannot reinitialise DataTable

Question

I'm using Jquery Datatable in ASP.NET, and UpdatePanel (scriptManager) . I have the next below error:

DataTables warning (table id = 'tbVerificationApplicant'): Cannot reinitialise DataTable.

To retrieve the Datatables object for this table, pass no argument or see the docs for bRetrieve and bDestroy

This is the Jquery file to create the table:

function DatatablesExec() { 
        $('#tbVerificationApplicant').dataTable({
            'bProcessing': true,
            'bServerSide': true,
            "sPaginationType": "full_numbers",
            'sAjaxSource': 'listVerificationData.ashx?ddlStatusValue=' + $("#ddlStatusClient option:selected").text(),
            "fnDrawCallback": function () {
                $('#tbVerificationApplicant tbody tr').click(function () {
                    var hRef = $("td:eq(0)", this).text();
                    document.location.href = 'frm_VerifyIdentity.aspx?ID=' + hRef;
                });
            }
    });
}

$(document).ready(function () {
    /* Initialise the DataTable */

        DatatablesExec()

});

But, to avoid that the table desapear after I changed the dropdownlist, I added the next below code in the code behind in the web form.

protected void Page_Prerender(object sender, EventArgs e)
{
    {
        ScriptManager.RegisterStartupScript(this, this.GetType(), "_function_dummyname", "<script type='text/javascript'>DatatablesExec();</script>", false);
    }
}

It's working well, but at the begining appear a pop up with this error.

Thi is part of the web form:

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="ddlStatusClient" EventName="SelectedIndexChanged" />
    </Triggers>
    <ContentTemplate>
        <table id="tbVerificationApplicant" class="display">
                <thead>

Answer 1

This drove me nuts, too, so I thought I'd add the solution that worked for me.

If you're sending any Ajax requests that respond in some element of your table, in your table configuration you'll need to set

bRetrieve: true 

SUVASH'S BLOG explains:

There is an another scenario ,say you send more than one ajax request which response will access same table in same template then we will get error also.In this case fnDestroy method doesn’t work properly because you don’t know which response comes first or later.Then you have to set bRetrieve TRUE in data table configuration.That’s it.

Answer 2

When your page loads ,your function DatatablesExec() is executed twice: once in code-behind Page_Prerender and once in $(document).ready function.

The error means you are trying to make a table a Datatable, when it infact is already a Datatable.

You will have to rethink your design here.

Why is it neccessary to RegisterStartupScript in PreRender?

Try removing either one of the two DatatablesExec() and your problem should dissapear!

Answer 3

I have had this problem too i read different threads about solving this but no luck. But at the end i have initialized datatable in jquery window load method

$(window).load(function(){
$("#example").DataTable();
}); 

instead of jquery's document ready method

$(document).ready(function(){
$("#example").DataTable();
});

and miracle happens :) .. Hope it helps you.Thanks

Answer 4

Hello everyone i just want to add something in this case, i also experience it and also search for the solution for this problem but now i found the answer rather than using bDestroy always check your referencing id of the datatable in my case if you already use this

$('#dtAddParticipantList').dataTable 

and your other table also use this

$('#dtAddParticipantList').dataTable 

change it to something different

var oTable = $('#dtParticipantList').dataTable({ 
 //some code stuffs
});

Answer 5

Try to add destory: true to your dataTable configuration:

$('#dataTable').dataTable({
  destory: true,
  ...
});

Answer 6

$('#example').dataTable().fnClearTable();
$('#example').dataTable().fnDestroy();