DataTables Showing Duplicate Pagination And Search Controls

Question

I am having issues with using a second DataTables object on a different page. I have successfully created a DataTable that sits on a page within my Web App. It all looks fine and functions correctly. However, I then copied the exact code and pasted it onto a second page and although my DataTable populates correctly, I am getting a second instance of the Pagination and Search controls (as shown below). I have read some information on destroying the table as a second instance can be detected, but I have even tried turning off the first DataTable that I created and it doesn't seem to matter.

Loading my DataTable is done through the $(document).ready call on both pages although I'm not sure if this is correct as I want to load various DataTables on the same page but within different tab controls.

My code looks like so:

<script type="text/javascript" language="javascript" >
    $(document).ready(function() {      
        var siteTickets = $('#ticketsTable').DataTable( {
            "bProcessing": true,
            "bServerSide": false,
            "bDestroy": true,
            "ajax":{
                url :"framework/get_tickets_by_site.php"
            },
            aoColumns: [
                        { mData: 'id', sClass: "dt-body-center" },
                        { mData: 'summary',
                            "render" : function(data, type, row, meta){
                                   return $('<a>')
                                      .attr('href', data)
                                      .text(data)
                                      .wrap('<div></div>')
                                      .parent()
                                      .html();
                            }
                        },
                        { mData: 'c_location', sClass: "dt-body-center",
                            "render" : function(data, type, row, meta){
                                       return $('<a>')
                                          .attr('href', data)
                                          .text(data)
                                          .wrap('<div></div>')
                                          .parent()
                                          .html();
                                }
                         },
                        { mData: 'priority', sClass: "dt-body-center" },
                        { mData: 'first_name', sClass: "dt-body-center" },
                        { mData: 'created_at' },
                        { mData: 'due_at' },
                        { mData: 'status', sClass: "dt-body-center" },
                        { mData: 'last_updated' }
                ],
            "fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {           
                switch( aData["priority"] ) {
                    case "1":
                        $("td:eq(3)", nRow).text( "High" );
                        break;
                    case "2":
                        $("td:eq(3)", nRow).text( "Medium" );
                        break;
                    case "3":
                        $("td:eq(3)", nRow).text( "Low" );
                        break;
                    default:
                        break;
                }       
                return nRow;
            },
            "order": [[0, 'asc']],
            "lengthMenu": [[20, 50, 100, -1], [20, 50, 100, "All"]]
        } );

    } );
</script>

I have also tried using the DataTables.Destroy() command but nothing seems to do the trick.

Any help would be appreciated. Thanks.

Answer 1

Possibly this solution may fix your issue, Set data-turbolinks to false in the tables

<table id="myTable" data-turbolinks="false">
 /* Insert table content... */
</table> 

If you are using the below code for creating datatable,

<script>
 $(document).ready(function(){
     $('#myTable').dataTable({ });
 })
</script>

Answer 2

There's a slight error in the DataTable instantiation. The correct way to instantiate DataTables is using the lowercase selector.dataTable like this:

$('#ticketsTable').dataTable(...)

The syntax selector.DataTable() is used for DataTable API calls e.g:

$('#ticketsTable').DataTable().rows('.modified').invalidate().draw();