Buttons not displaying and generating warning 'cannot reinitialize DataTable'

Buttons not displaying and generating warning 'cannot reinitialize DataTable'

scoonscoon Posts: 16Questions: 0Answers: 0
edited March 2019 in Free community support

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.

Replies

  • scoonscoon Posts: 16Questions: 0Answers: 0

    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. :/

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

    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

  • scoonscoon Posts: 16Questions: 0Answers: 0

    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.

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

    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

  • scoonscoon Posts: 16Questions: 0Answers: 0

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

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

    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

  • scoonscoon Posts: 16Questions: 0Answers: 0

    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" />
    
  • tangerinetangerine Posts: 3,342Questions: 35Answers: 394

    jquery.js should precede DataTables' references.

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

  • scoonscoon Posts: 16Questions: 0Answers: 0

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

    Thanks guys

  • scoonscoon Posts: 16Questions: 0Answers: 0

    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?

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

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

    Kevin

This discussion has been closed.