Found a bug + solution regarding pagination and footer in Jquery Datatable

umair_khalid

Hi Devs,

In our Angular 6 project, we are using this library to draw both static and dynamic tables. We sometimes construct the whole HTML inside the code or do it via HTML file as well.

Recently while drawing a very custom kind of table as per the user requirement, when setting the footer of the table, the pagination stopped working.

We tried to fire this code as well.

      $(document).ready(function() {
          $('#example').DataTable( {
            paging: true
           } );
    });

Somehow the footer does get displayed, but the library throws the following error upon calling DataTable() function. Here is the stack trace:

      $(document).ready(function() {
      //  try{
          $('#example').DataTable( {
            paging: true
           } );

Cannot read property 'length' of undefined
    at _fnBuildHead (jquery.dataTables.js:3259)
    at _fnInitialise (jquery.dataTables.js:4706)
    at loadedInit (jquery.dataTables.js:1294)
    at HTMLTableElement.<anonymous> (jquery.dataTables.js:1306)

Looking at the library it is trying to do this:

var cells = oSettings.aoFooter[0];
    
            for ( i=0, ien=cells.length ; i<ien ; i++ ) {
                column = columns[i];

Since the code assumes that cells would not be null , so it never checks for it and we get a null pointer.

Now when i had deeper look what i found out is that , it is i guess "Cache the footer cells". GOD knows why. Anyway, when we call our jquery to get instance of DataTable the second time, since caching is already applied, that code never executes and no null pointer is thrown and the pagination started working.

Here is how we fix it in our code for the time being.

      $(document).ready(function() {
       try{
          $('#example').DataTable( {
            paging: true
           } );
        }catch(err){
          $('#example').DataTable().rows().draw();
        }
      });

Regards,

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

colin

Hi @umair_khalid ,

There's a lot going on there. Would you be able to create a test case that demonstrates the problem, please. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin