Cannot reinitialise DataTable

gullfounder

I get the following error "DataTables warning: table id=table_Logs - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3"

I am using AngularJs to initialize the datatables and get data via API. But it the error "Cannot reinitialize DataTable"

The code of the Table is

logTable = $('#table_Logs').DataTable({                    
                    serverSide: true,
                    processing: true,
                    searchDelay: 500,
                    responsive: true,
                    ajax: {
                        url: '/API/Exceptions',
                        method: 'POST',
                        datatype: 'json',
                        data: function (serverParams) {                            
                            for (var i = 0; i < serverParams.order.length; i++) {
                                serverParams.order[i].column = serverParams.columns[serverParams.order[i].column].data;
                            }                            
                            delete serverParams['columns'];

                            return serverParams;
                        }
                    },
                    columns: [
                        {
                            data: 'timeStamp',
                            render: function (timeStamp) {
                                return $filter('date')(timeStamp, 'medium');
                            }
                        },
                        {
                            data: 'exception',
                            render: function (exception) {
                                return exception ? exception.slice(0, 50) : '';
                            }
                        },
                        {
                            data: 'message',
                            render: function (message) {
                                return message ? message.slice(0, 20) : '';
                            }
                        },
                        {
                            orderable: false,
                            render: function () {
                                return `<i class="showLog fa fa-fw fa-2x fa-toggle-down"></i>`;
                            }
                        },
                    ],
                    columnDefs: [
                        { responsivePriority: 1, targets: 0 },
                        { responsivePriority: 1, targets: 1 },
                        { responsivePriority: 1, targets: 3 },
                    ],
                    responsive: {
                        details: 'false',
                    },

                });

                logTable.on('click', '.showLog', function () {
                    var tr = $(this).closest('tr');
                    var row = logTable.row(tr);

                    if (row.child.isShown()) {
                        // This row is already open - close it
                        row.child.hide();
                        tr.removeClass('shown');
                    }
                    else {
                        // Open this row                        
                        var rowinfo = row.data();
                        if (rowinfo == undefined) {
                            rowinfo = logTable.row(tr.prev()).data();
                        }
                        row.child(format(rowinfo)).show();
                        tr.addClass('shown');
                    }
                });

                function format(logRow) {
                    return '<dl>' +
                        '<dt><h4 class="text-bold">Exception:</h3></td>' +
                        '<dd><pre class="error-log-pre">' + $sce.trustAsHtml(logRow.exception) + '</pre></td>' +
                        '<dt><h4 class="text-bold">Message:</h3></td>' +
                        '<dd><pre class="error-log-pre">' + $sce.trustAsHtml(logRow.message) + '</pre></td>' +
                        '<dt><h4 class="text-bold">Additioanl Properties:</h3></td>' +
                        '<dd><pre class="error-log-pre">' + logRow.properties + '</pre></td>';
                }
            });

The HTML code is as like

<div class="card" ng-controller="logController" ng-init="init()">
    <div class="card-header header-elements-inline">
        <h5 class="card-title">Exception logs</h5>
        <div class="header-elements">

        </div>
    </div>

    <div class="card-body">
        The list of <code>Exception logs</code>.
    </div>

    <table class="table datatable-ajax" id="table_Logs">
        <thead>
            <tr>
                <th>Time Stamp</th>
                <th>Exception</th>
                <th>Message</th>
                <th class="text-center">Actions</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>

tangerine

The link in the error message is provided for your use. It shows likely causes and diagnostic steps.

SunnySanyal

Cannot reinitialise DataTable...
use your datatable definition in document.ready or init method as given by api. this error occurs when you use the datatable property intilization not in pageload or document.ready. why this happen because if it reinitilizes everytime then datatabble will crash as same objects will be loaded everytime on every click. if your using your datatable defination in click of button then move it to document.ready() because the defination needs to load only one time..
e.g
$('abcexample').Datatable(
{
paging: true,
});
this type of initilization needs only one time declaration so move ur initilizations in document.ready(). and refer to api for more information.

look at your code
$('#table_Logs').DataTable({
serverSide: true,
processing: true,
searchDelay: 500,
responsive: true,});
the above defination needs to be only oone time. you should not use it on click. or any event expect document.ready.

SunnySanyal

$('#example').dataTable( {
"ajax": {
"url": "data.json",
"type": "POST"
}
} );

colin

As tangerine said, the link is the place to look, what diagnostic steps have you done. If that doesn't help, we're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

rf1234

Take a look at this please:

https://datatables.net/forums/discussion/comment/177394/#Comment_177394