Two tables on same page – Cannot reinitialize DataTable

musium

Hi Community

I’m using DataTables in a ASP.Net (MVC 5) application. Everything is working great.
But as soon as I try to create two (or more) tables on the same page I get the following exception:
DataTables warning: id=XY - Cannot reinitialize DataTables.
I checked my code several times … both tables and there ‘DataTables-variable’ have unique ids/names. The DataTables init method gets only called once for each table.

I hope you can help me to find wat’s wrong in my code.
Note: I post as less cade as I can (but it still is a lot)… and I removed all ASP.Net code (code here is plain HTML, JS):

Thank you very much for your help.

Code:

[..header etc]

                <table id="ebeefbbeccfdfde" class="table table-striped table-bordered table-hover dataTable" width="100%"> 
                    <thead>
                        [..columns]
                    </thead>
                    <tbody></tbody>
                </table>
                <script type="text/javascript">  
                    var fafdcafedb = undefined;
                    $(function() {
                        var bfeedefdedaa = $('#ebeefbbeccfdfde').DataTable({
                            "aria": {
                              "sortAscending": ": activate to sort column ascending",
                              "sortDescending": ": activate to sort column descending"
                            }
                          },
                          "columns": [
                            [...columns]
                          ],
                          "colVis": {
                            "buttonText": "Show / hide columns"
                          },
                          "colReorder": {
                            "realtime": true
                          },
                          "order": [
                            [
                              1,
                              "asc"
                            ]
                          ],
                          "processing": true,
                          "serverSide": true,
                          "dom": "<'dt-toolbar'<'col-xs-3 col-sm-6 dataTableToolBarLeft'l><'col-sm-6 col-xs-9 dataTableToolBarRight'C<'refreshButtonContainer'>T>R>t<'dt-toolbar-footer'<'col-sm-6 col-xs-12 hidden-xs'i><'col-sm-6 col-xs-12'p>>",
                          "ajax": {
                            "url": "/MyOtherController/IndexAjaxHandler"
                          },
                          "tableTools": {
                            "sSwfPath": "/js/plugin/datatables/swf/copy_csv_xls_pdf.swf",
                            "aButtons": [
                              {
                                "sExtends": "copy",
                                "sButtonText": "Copy"
                              },
                              {
                                "sExtends": "print",
                                "sButtonText": "Print"
                              },
                              {
                                "sButtonText": "Save",
                                "sExtends": "collection",
                                "aButtons": [
                                  {
                                    "sExtends": "csv",
                                    "sButtonText": "CSV"
                                  },
                                  {
                                    "sExtends": "xls",
                                    "sButtonText": "XLS"
                                  },
                                  {
                                    "sExtends": "pdf",
                                    "sButtonText": "PDF"
                                  }
                                ]
                              }
                            ]
                          },
                          "preDrawCallback": preDrawCallback,
                          "rowCallback": rowCallback,
                          "drawCallback": drawCallback
                        });
                            
                    $("div.refreshButtonContainer")
                        .html('<button id="fdbabaad" type="button" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-refresh"></span></button>');

                    $('#fdbabaad').click(function () {
                        bfeedefdedaa.ajax.reload();
                    });
                    
                    $('#ebeefbbeccfdfde thead th input').onDelay('keyup change', function() {
                        applyFilter(this, bfeedefdedaa);
                    }, GlobalProjectConfig.searchQueryThrottle);

                    $('#ebeefbbeccfdfde thead th select').change(function() {
                        applyFilter(this, bfeedefdedaa);
                    });
                });
                            
                    function preDrawCallback(settings) {
                        if (!fafdcafedb)
                            fafdcafedb = new ResponsiveDatatablesHelper($('#ebeefbbeccfdfde'), GlobalProjectConfig.breakpointDefinition);
                    }
                    
                    function rowCallback(row, data) {
                        fafdcafedb.createExpandIcon(row);
                    }
                    
                    function drawCallback(settings) {
                        (fafdcafedb).respond(); 
                    }
                    
                    var serverSideData = {
                    controllerName: '',         
                    detailsUrlTemplate: '<a href="/MyController/Details">Details</a>',
                    editUrlTemplate: '<a href="/MyController/Edit">Edit</a>',
                    deleteUrlTemplate: '<a href="/MyController/Delete">Delete</a>',
                };
                </script>

                <table id="aecafafeffdaa" class="table table-striped table-bordered table-hover dataTable" width="100%">
                    <thead>
                        [..columns]
                    </thead>
                    <tbody></tbody> 
                </table>
                <script type="text/javascript">
                    var dfdfeafabaddda = undefined;
                    $(function() {
                        var adebadccdebffcbaedc = $('#aecafafeffdaa').DataTable({
                            "aria": {
                              "sortAscending": ": activate to sort column ascending",
                              "sortDescending": ": activate to sort column descending"
                            }
                          },
                          "columns": [
                            [...columns]
                          ],
                          "colVis": {
                            "buttonText": "Show / hide columns"
                          },
                          "colReorder": {
                            "realtime": true
                          },
                          "order": [
                            [
                              1,
                              "asc"
                            ]
                          ],
                          "processing": true,
                          "serverSide": true,
                          "dom": "<'dt-toolbar'<'col-xs-3 col-sm-6 dataTableToolBarLeft'l><'col-sm-6 col-xs-9 dataTableToolBarRight'C<'refreshButtonContainer'>T>R>t<'dt-toolbar-footer'<'col-sm-6 col-xs-12 hidden-xs'i><'col-sm-6 col-xs-12'p>>",
                          "ajax": {
                            "url": "/Test/IndexAjaxHandler",
                            "data": addRequestParameters
                          },
                          "tableTools": {
                            "sSwfPath": "/js/plugin/datatables/swf/copy_csv_xls_pdf.swf",
                            "aButtons": [
                              {
                                "sExtends": "copy",
                                "sButtonText": "Copy"
                              },
                              {
                                "sExtends": "print",
                                "sButtonText": "Print"
                              },
                              {
                                "sButtonText": "Save",
                                "sExtends": "collection",
                                "aButtons": [
                                  {
                                    "sExtends": "csv",
                                    "sButtonText": "CSV"
                                  },
                                  {
                                    "sExtends": "xls",
                                    "sButtonText": "XLS"
                                  },
                                  {
                                    "sExtends": "pdf",
                                    "sButtonText": "PDF"
                                  }
                                ]
                              }
                            ]
                          },
                          "preDrawCallback": preDrawCallback,
                          "rowCallback": rowCallback,
                          "drawCallback": drawCallback
                        });
        
                        $("div.refreshButtonContainer")
                            .html('<button id="aeaaabddeebebdb" type="button" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-refresh"></span></button>');

                        $('#aeaaabddeebebdb').click(function () {
                            adebadccdebffcbaedc.ajax.reload();
                        });
                        
                        $('#aecafafeffdaa thead th input').onDelay('keyup change', function() {
                            applyFilter(this, adebadccdebffcbaedc);
                        }, GlobalProjectConfig.searchQueryThrottle);

                        $('#aecafafeffdaa thead th select').change(function() {
                            applyFilter(this, adebadccdebffcbaedc);
                        });
                    });
                                
                    function preDrawCallback(settings) {    
                        if (!dfdfeafabaddda)
                            dfdfeafabaddda = new ResponsiveDatatablesHelper($('#aecafafeffdaa'), GlobalProjectConfig.breakpointDefinition);
                    }
                    
                    function rowCallback(row, data) {
                        dfdfeafabaddda.createExpandIcon(row);
                    }
                    
                    function drawCallback(settings) {
                        (dfdfeafabaddda).respond();
                    }
                    
                    var serverSideData = {
                    controllerName: '',     
                    detailsUrlTemplate: '<a href="/MyController/Details">Details</a>',
                    editUrlTemplate: '<a href="/MyController/Edit">Edit</a>',
                    deleteUrlTemplate: '<a href="/MyController/Delete">Delete</a>',
                };
            </script>
            
            </div>
        </div>
        
        [..footer][..other scripts]
    <script src="/js/plugin/datatables/jquery.dataTables.min.js"></script>
    <script src="/js/plugin/datatables/dataTables.colReorder.min.js"></script>
    <script src="/js/plugin/datatables/dataTables.colVis.min.js"></script>
    <script src="/js/plugin/datatables/dataTables.tableTools.min.js"></script>
    <script src="/js/plugin/datatables/dataTables.bootstrap.min.js"></script>
    <script src="/js/plugin/datatable-responsive/datatables.responsive.min.js"></script>
</body>
</html>

musium

Note: Here is the code in a spate HTML file (easier to read):
https://drive.google.com/file/d/0B0vEstrhwNYRd2dXbFNYZXlmRzA/view?usp=sharing