Jquery – DataTables warning (table id = ‘IDTableName’): Cannot reinitialise DataTable

datatablesjquery

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>

Best Answer

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.

Related Topic