DataTables logo DataTables

Error Message ("Cannot reinitialise DataTable") When Table is Blank
  • I am using dataTables 1.7.3 and obviously I love it.... a truly amazing script!

    I am, however, having a small problem that I'm hoping someone can help with.

    I have the script setup to run on a 7 column table using the following code:

    <link href="/jquery/plugins/datatables/media/css/custom_table.css" rel="stylesheet" type="text/css" />
    script src="/jquery/jquery-1.4.3.min.js" type="text/javascript"></script>
    <script src="/jquery/plugins/datatables/media/js/jquery.dataTables.js" type="text/javascript"></script> <!-- Interactive tables -->
    <!-- dataTables end -->
     
    <script>
     
    $(document).ready(function() {
    	$('#datatable').dataTable( {
    		"aoColumns": [
    			{ "sType": "html",
    			"sWidth": "200px"},
    			{ "bSearchable": false},
    			{ "bSearchable": false},
    			{ "bSearchable": false},
    			{ "bSearchable": false},
    			{ "bSearchable": false},
    			{ "sWidth": "140px" }
    		],
    		"bJQueryUI": false,
    		"sPaginationType": "full_numbers",
    		"iDisplayLength": 25,
    		"bAutoWidth": false,
    		"aaSorting": [ ] // Prevents initial sorting 
     
     
    		} );
    } );
     
    </script> 
    


    Normally this works perfectly.

    The data for this table is dynamic in the sense that when a user loads the page, our system fetches the information from our database and plugs it into the table. Then DataTables works it's magic!

    The problem is that there are times when the table will be empty. When this happens, we have this code appear in the table:
    <tbody>
      <tr>
    <td height="30" align=center colspan="7">You do not have any current emails. <a href="?action=sample">Click here</a> to create a new one.</td>
      </tr>
    </tbody>
    

    But, as soon as that happens, there is a popup alert saying:
    DataTables warning (table id = 'datatable'): Cannot reinitialise DataTable.
    
    To retrieve the DataTables object for this table, please pass either no arguments to the dataTable() function, or set bRetrive to true. Alternativly, to destroy old table and create a new one...ETC.

    Is there a way to prevent this from happening? Any insight is greatly appreciated!

    Thanks in advance.
  • When you say "as soon as this happens" are you refering to the display of the table or the clicking of the link? This error happens when you try to access an already created datatable that does not have the initialization option 'bRetrieve' set to true. Is there code calling $('#datatable').dataTable() somewhere other than the document.ready?
  • Hi rdahl,

    Thanks for the reply. My apologies for the confusion about "as soon as that happens".

    What I mean is that when the web page loads, if there is actual rows of data (with all 7 columns) in the table, then everything works perfectly.

    However, if there are no rows of data with 7 columns in the table, and the contents of the table is just this:
    <tbody>
      <tr>
    <td height="30" align=center colspan="7">You do not have any current emails. <a href="?action=sample">Click here</a> to create a new one.</td>
      </tr>
    </tbody>
    

    Then I get that error message saying "DataTables warning (table id = 'datatable'): Cannot reinitialise...".

    All the code I have on the page was included in my original post. So, the only instance of this "$('#datatable').dataTable)" is where you see it.

    I assumed the problem must be related to dataTables looking for the 7 columns of data in the table and not finding it... but I could be totally wrong.

    Any insight is greatly appreciated!

    Thanks again.
  • In my experiece when datatables has an issue with columns configured != columns in the table it provides a different error message, you could try changing your code to this:
    <tr>
    <td height="30" align=center>You do not have any current emails. <a href="?action=sample">Click here</a> to create a new one.</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
      </tr>
    
    which would fix the issue if it is related to the bumber of columns, but I would try adding "bRetreive": True to the initialization object of datatables first.
  • I tried putting: "bRetrieve": true,

    But, now in FireFox Error Console I see:
    sData is undefined

    In IE, I get an error saying:
    'length' is null or not an object

    I also can't put all those blank TD's because then it ruins the layout. It forces the first column to be narrow and the whole message does not fit in it. I can't even adjust the width of that column because then it will distort all my column headings.

    Any other ideas? I'm open to trying anything!
  • How are you determining that the table does not have any data in it, and how are you adding:
    <tbody>
      <tr>
    <td height="30" align=center colspan="7">You do not have any current emails. <a href="?action=sample">Click here</a> to create a new one.</td>
      </tr>
    </tbody>
    

    to the table?
  • The contents of the table come from our database. That doesn't happen through the DataTables script. Our database just generates a normal table, and the DataTables works it's magic on that.

    I've done some addition testing and I think the issue is that as soon as I have a row that spans multiple columns (ie. colspan="4") it kills the DataTables script and produces that pop-up alert.

    Here is an example from one of my pages:
    (Note: This is different than the previous example b/c this one only has 4 columns.)


    This is at the top of the file:

    <script src="/jquery/jquery-1.4.3.min.js" type="text/javascript"></script> <!-- Main jQuery library -->
    <script src="/jquery/plugins/datatables/media/js/jquery.dataTables.js" type="text/javascript"></script> <
    <script src="/jquery/plugins/datatables/media/js/dataTables.fnGetHiddenNodes.js" type="text/javascript"></script>
    
    $(document).ready(function(){
    
    /* Create an array with the values of all the checkboxes in a column - Makes checkboxes work for sorting */
    $.fn.dataTableExt.afnSortData['dom-checkbox'] = function  ( oSettings, iColumn )
    {
    	var aData = [];
    	$( 'td:eq('+iColumn+') input', oSettings.oApi._fnGetTrNodes(oSettings) ).each( function () {
    		aData.push( this.checked==true ? "1" : "0" );
    	} );
    	return aData;
    };
    
    var oTable = $('#datatable').dataTable({
    		"aoColumns": [
    			{ "sType": "html" },
    			null,
    			{ "sSortDataType": "dom-checkbox",
    			  "sType": "html"},
    			{ "bSortable": false,
    			  "bSearchable": false}
    		],
    		"bJQueryUI": false,
    		"sPaginationType": "full_numbers",
    		"aaSorting": [ ] // Prevents initial sorting
    	});
    
    // WORK AROUND FOR CHECKBOX FIELDS
    
    $("#modform").submit(function(){
    	var nNodes = oTable.fnGetHiddenNodes();
    	for (var i = 0; i < nNodes.length; i++) {
    		if ($('input:checked',nNodes[i]).val()) {
    			var nHidden = document.createElement( 'input' );
    			nHidden.type = 'hidden';
    			nHidden.name = "disp";
    			nHidden.value = $('input:checked', nNodes[i]).val();
    			this.appendChild( nHidden );
    		}
    	}
    });
    });
    


    This version of the table works perfectly:


    <table width="100%" border="1" class="display" id="datatable" cellspacing="0" cellpadding="0">
      <thead>
        <tr>
    	<th>Column A</th>
    	<th style="text-align:center;">Column B</th>
    	<th style="text-align:center;">Column C</th>
    	<th style="text-align:center;">Column D</th>
        </tr>
      </thead>
       <tbody>
    
    <tr align="middle" class="even">
    
     <td align=left height="20"><a href="?action=view">General</a> </td>
     <td align="center">0</td>
     <td align="center"><input type="checkbox" name="disp" value="20"  ></td>
     <td align="center"><a href="?action=delete"><img src="img/delete.png" alt="Delete Interest Groups" width="86" height="15" border="0" /></a></td>
                </tr>
    
     </tbody>
     </table>
    
    


    This version of the table produces the error saying:
    ""DataTables warning (table id = 'datatable'): Cannot reinitialise DataTable.
    To retrieve the DataTables object for this table, please pass either no arguments to the dataTable() function, or set bRetrive to true. Alternativly, to destroy old table and create a new one...ETC."'


    <table width="100%" border="1" class="display" id="datatable" cellspacing="0" cellpadding="0">
      <thead>
       <tr>
    	<th>Column A</th>
    	<th style="text-align:center;">Column B</th>
    	<th style="text-align:center;">Column C</th>
    	<th style="text-align:center;">Column D</th>
       </tr>
      </thead>
      <tbody>
        <tr><td colspan=4 align=center><br><b>You have no groups.</b></td></tr>
    		    </tbody>
    		  </table>
    
    
  • Hi Guys,

    Does anyone know how I can get DataTables to not spit out this nasty warning when we have just one row of data that spans all columns?

    I've tried everything I can think of and have had no luck.

    Everything else is working so perfectly (and is amazing!), but as soon as visitors to my page see this pop-up alert saying "Cannot reinitialise DataTable" it scares them.

    Any help is very greatly appreciated!

    I'm sure other people may occasionally need to use colspans, so I hope this thread is helpful for them, too.

    Thanks in advance!
  • This is such an old post but here's the answer anyway for other people searching.

    I think the problem you're having is that the javascript is firing before the data is loaded. To get around this make sure the script is located BELOW the table that is being populated.

    I had the exact same problem when I had the script as part of my global.js file in the header of the page. As soon as I moved the dataTable portion below the table it was initializing it all worked fine.

    Hope that helps someone!
  • I know the post is old but : Thank You, it helps !
  • How is my javascript going to fire after the table when the javascript is in the head of my application layout? I have an application.js that requires the dataTable.js.....are you suggesting to pull the dataTable out of application.js and load it separately on the page below the table? Why did Ryan Bates not have to do this in his screencast?
  • Just thought I'd drop you a line to tell you your datatables.net really rocks! I have been looking for this sort of information for a long time.. I don't usually reply to posts but I will in this case. WoW terrific great.
  • The title of this thread should be: How to handle empty record sets?

    Basically, AFAIK, you cannot, or at least not elegantly with a colspan'd message.

    The hack I have in place is to check for num records; if none found, don't display the data tables class flag for this particular page. I still get the data tables styling and no annoying alert window.

    Unfortunate to have to do this checking in each data tables page, pointless boilerplate. Would be nice if we could add an id attrib a la <tr><td id="dTableEmpty" colspan="8">No records found</td></tr> and have dataTables suppress the alert warning accordingly....
  • The title of this thread should be: How to handle empty record sets?

    Possibly - but is has rather spun out from its original post, where the title was accurate.

    Basically, AFAIK, you cannot, or at least not elegantly with a colspan'd message.

    Does sZeroRecords ( http://datatables.net/usage/i18n#sZeroRecords ) not provide what you need?

    Allan
  • The error gone away when I set the "bRetrieve" to "true". Thank you @allan for this great script!
  • Hi guys,

    I also have problem with ""DataTables warning (table id = 'datatable'): Cannot reinitialise DataTable. as well and the error gone away when I set the "bRetrieve " to "true", but I get the duplicate data in each Tap and all Taps have the same rows. Does anyone know, please tell me?
This discussion has been closed.
All Discussions