Buttons not displaying and generating warning 'cannot reinitialize DataTable'

scoon

I'd like to preface this discussion by saying I did refer to the troubleshooting page at 'http://datatables.net/tn/3' and that didn't help. As for DataTable code, I have all of the includes required for functionality. The reference to DataTables in my code is in one and ONLY one spot, so the reinitialise issue isn't due to my making multiple calls to the dataTable function as suggested in the troubleshooting page. I'm at a loss as to why the buttons aren't showing and generating an error. Of note the dataTable functionality works perfectly UNTIL I add in the button features, per the provided code samples.

javascript:

function xmlTableParser(proxyURL, tableID) {
            var request = new XMLHttpRequest();
            request.open("GET", proxyURL, true);
            request.send();
            request.onreadystatechange = function() {
               if ((this.readyState === 4) && (this.status === 200)) {
                  // Convert the XML document to a string
                  xmlString = this.responseText.toString();
                  // Eliminate the Meta-Query from the <Query> tag in the XML results as it can potentially cause issues when reading the XML code
                  var badQuery = xmlString.substring((parseInt(xmlString.search("Resource"))-1), (parseInt(xmlString.search('Result'))-5));
                  xmlString = xmlString.replace(badQuery, '');
                  // Convert string of XML code back into an XML document
                  var parser = new DOMParser();
                  var xmlDoc = parser.parseFromString(xmlString,"text/xml");
                  // Collect the number of rows (<Tuple> tags) and columns (<Answer> tags per <Tuple> tag) of data from the XML document
                  var tupleCount = xmlDoc.getElementsByTagName("Tuple").length;
                  var columnCount = xmlDoc.getElementsByTagName("Answer").length / tupleCount;
                  // Build the HTML Table's contents from the data in the XML document
                  var rowHTML = "";
                  for (var i = 0; i < tupleCount; i++) {
                     rowHTML = '<tr>';
                     for (var j = 0; j < columnCount; j++) {
                        if (j == 0 || j == 4) {}
                        else {
                            rowHTML += '<td nowrap>' + xmlDoc.getElementsByTagName("Answer")[((columnCount*i)+j)].childNodes[0].nodeValue + '</td>';
                        }
                     }
                    **_ rowHTML += '</tr>';
                     $(tableID).append(rowHTML);
                     
                     
                     $(document).ready( function () {
                        $('#myTable').dataTable({
                            dom: 'Bfrtip',
                            buttons: [
                            'copy', 'csv', 'excel', 'pdf', 'print'
                            ]
                        
                     });
                     }_**);
                     
                     
                     
                     
                     
                  }
                  
         }}}

And the table itself:

<div style=" margin-top:8px;  z-index:0;" id="mainDiv">
            <table id="myTable" style="border:1px solid lightgrey;">
               <th>header 1</th>
               <th>header 2</th>
               <th>header 3</th>
               <th>header 4</th>
               <th>header 5</th>
               <th>header 6</th>
               <th>header 7</th>
               <th>header 8</th>
            </table>
         </div>

EDIT: Updated using Markdown Code formatting.

scoon

Wow, the formatting of trying to post this discussion got all kinds of hosed. Made worse by the fact there doesn't appear to be an edit function on the post to try and fix it.

kthorngren

the formatting of trying to post this discussion got all kinds of hosed

You need to use Markdown code formatting. There is a link to the docs below the Preview button when you are creating a post.

doesn't appear to be an edit function

I think the default edit time is 10 or 15 minutes. After that edit is disabled.

so the reinitialise issue isn't due to my making multiple calls to the dataTable function

In line 20 of the above code you have:
for (var i = 0; i < tupleCount; i++) {

It looks like this code is within this for loop:

                     $(document).ready( function () {
                        $('#myTable').dataTable({
                            dom: 'Bfrtip',
                            buttons: [
                            'copy', 'csv', 'excel', 'pdf', 'print'
                            ]
                         
                     });

If thats the case then multiple attempts at initializing the Datatable are made. Also you probably don't want to use $(document).ready( function () inside a function.

Note that in line 29 you have $(tableID).append(rowHTML); but are using $('#myTable').dataTable({ with hard coded table ID. Do you want to use the tableID instead?

Kevin

scoon

Thanks for the advice- first time user of your forums.
The for loop is for the purpose of taking dynamic data from the server and generating a table row for each data set. Datatable is inside the loop in order to capture each table row generated, and throwing that to the table utilizing the dataTable code. I've tried to store the captured data from the server to an array and then outputting the array to the dataTable, but I couldn't get the sort,search, pagination, etc features to work when trying that.

kthorngren

The for loop is for the purpose of taking dynamic data from the server and generating a table row for each data set. Datatable is inside the loop in order to capture each table row generated

The Datatable should be initialized only after all the HTML has been built and appended to the page. In this case you are using DOM sourced data as described here:
https://datatables.net/manual/data/#Data-sources

I've tried to store the captured data from the server to an array and then outputting the array to the dataTable, but I couldn't get the sort,search, pagination, etc features to work when trying that.

This typically means that you are getting a Javascript error that is stopping the script. Take a look at the browser's console for the errors.

You can load the data either way. If you can it would be helpful to have a link to your page or a test case replicating the issue.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

scoon

Ok, I managed to move the dataTable function out of the loop and still have dataTables work properly, however the buttons still aren't showing (at least I'm not getting the initialization error anymore). Checking the console, I got the following TypeErrors:

TypeError p is undefined
<anonymous> https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js:8
<anonymous> https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js:8
<anonymous> https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js:8

TypeError l is undefined
<anonymous> https://cdn.datatables.net/buttons/1.5.6/js/buttons.flash.min.js:30
<anonymous> https://cdn.datatables.net/buttons/1.5.6/js/buttons.flash.min.js:8
<anonymous> https://cdn.datatables.net/buttons/1.5.6/js/buttons.flash.min.js:8

TypeError v is undefined
<anonymous> https://cdn.datatables.net/buttons/1.5.6/js/buttons.html5.min.js:11
<anonymous> https://cdn.datatables.net/buttons/1.5.6/js/buttons.html5.min.js:8
<anonymous> https://cdn.datatables.net/buttons/1.5.6/js/buttons.html5.min.js:8

TypeError k is undefined
<anonymous> https://cdn.datatables.net/buttons/1.5.6/js/buttons.print.min.js:6
<anonymous> https://cdn.datatables.net/buttons/1.5.6/js/buttons.print.min.js:5
<anonymous> https://cdn.datatables.net/buttons/1.5.6/js/buttons.print.min.js:5

scoon

Caught my own mistake, problem above resolved. The console is clean of errors, however the buttons still aren't rendering.

kthorngren

Your Datatables init code looks ok. Sounds like you aren't loading all the correct JS and CSS files or they are in the wrong order. Please post a link to your page or a test case replicating the issue so we can take a look.

Kevin

scoon

Here are all JS and CSS files being used, in order:

<!-- CSS for datatables -->
   <link rel="stylesheet" type="text/css" href="DataTables/jquery.dataTables.min.css ">
<!-- javascript for the datatables ui -->
   <script type="text/javascript" src="DataTables/dataTables.jqueryui.min.js"></script>
<!-- javascript for datatables copy, csv, excel, pdf, print -->   
   <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
   <script src="https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js"></script>
   <script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.flash.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
   <script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.html5.min.js"></script>
   <script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.print.min.js"></script>
<!-- javascript required for charts -->
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
   <script src="http://d3js.org/d3.v5.min.js"></script>
   <script src="d3BarChart.js"></script>
   <script src="d3PieChart.js"></script>
<!-- css for formatting of data charts -->
   <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<!-- javascript for dropdown selector -->
   <script src="bootstrap.js"></script>
<!-- css for dropdown selector -->
   <link rel="stylesheet" href="bootstrap.css">
<!-- javascript for the datatables functionality -->
   <script type="text/javascript" charset="utf8" src="DataTables/datatables.js"></script>   
<!-- CSS for blueprint page layout -->
   <link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen" />
   <link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print" />
   <link rel="stylesheet" id="uncomp-core-ie" href="css/blueprint/ie.css" type="text/css" media="screen" />
<!-- CSS for local and custom CSS -->     
   <link rel="stylesheet" id="uncomp-core-ie" href="MSSP_CSS.css" type="text/css" />

tangerine

jquery.js should precede DataTables' references.

Also, why do you have jquery.dataTables.min.js and datatables.js ?

scoon

Awesome, that was the problem!
As soon as I removed reference to datatables.js everything worked! Woohoo!

Thanks guys

scoon

Interesting side effect of getting the export buttons to work- the results set drop down box goes away. Is it possible to have both the drop down (10, 25, 50,100 results) AND the export button options?

kthorngren

Yes you can do that, please see this FAQ:
https://datatables.net/faqs/index#buttons-page-length

Kevin