Answers

• ngungo Posts: 64Questions: 23Answers: 2

  April 2016

  I have not found way to put the column totals into second row cells so I improvised by output to multi-lines cell using html line break element <br>. It is not too bad and I have to move ọn :)

  Thanks for reading.
• allan Posts: 61,657Questions: 1Answers: 10,094 Site admin

  April 2016

  You would use something like: $('tr:eq(1) td:eq(...)', table.table().footer()). i.e. select the second row from the footer and then select whatever cell it is that you need.

  Allan
• ngungo Posts: 64Questions: 23Answers: 2

  April 2016

  Hi Allan,

  . Can you give me a ref link to $('tr:eq(1) td:eq(...)', table.table().footer()), please.
  . When use, I got an error: Cannot read property 'table' of undefined
  Of course, because the "footerCallback" is inside of "table"

  Basically, I have some like this:

  var table = $('#myTable').DataTable({
    // ...
    "footerCallback": function(row, data, start, end, display) {
      var api = this.api(), data;
      // ...
      total2 = api
        .column(2, {page: 'current'})
        .data()
        .reduce(function(a, b) {return a + b;}, 0);
      }
      // Update footer
      $(api.column(2).footer()).html(format(total2, ''));
      $('tr:eq(1) td:eq(2)', table.table().footer())
        .html(format(total2, ''));
    }
  });
  

  ngungo
• allan Posts: 61,657Questions: 1Answers: 10,094 Site admin

  April 2016

  table().footer() is the DataTables API method I mentioned. The full, searchable API is available here.

  In your code above you would probably access it as api.table().footer() as you have done for the other API methods in your callback function.

  Allan
• ngungo Posts: 64Questions: 23Answers: 2

  April 2016

  We are getting somewhere. No longer error but still not working. No display.
  I'll work some more on this.

  var table = $('#myTable').DataTable({
    // ...
    "footerCallback": function(row, data, start, end, display) {
      var api = this.api(), data;
      // ...
      total2 = api
        .column(2, {page: 'current'})
        .data()
        .reduce(function(a, b) {return a + b;}, 0);
      }
      // Update footer
      // This works fine
      $(api.column(2).footer()).html(format(total2, ''));
  
      // Not working
      $('tr:eq(1) td:eq(2)', api.table().footer())
        .html(format(total2, ''));
    }
  });
  

  var table = $('#myTable').DataTable({
    // ...
     "footerCallback": function(row, data, start, end, display) {
      // ...
      // Neither of these 2 works
      $('tr:eq(0) td:eq(2)', api.table().footer()).html(format(total2, ''));
      $('tr:eq(1) td:eq(2)', api.table().footer()).html(format(total2, ''));
    }
  });
  
• allan Posts: 61,657Questions: 1Answers: 10,094 Site admin

  April 2016

  I'd need a link to the page showing the issue to be able to understand why it isn't working please.

  Allan
• ngungo Posts: 64Questions: 23Answers: 2

  April 2016

  Here is the link: Test case
  Thanks Allan!

  var table = $('#myTable').DataTable({
    // ...
     "footerCallback": function(row, data, start, end, display) {
      // ...
  
      // This works fine
      $(api.column(2).footer()).html(format(total2, ''));
  
      // None of these 3 works
      $('tr:eq(1) td:eq(2)', api.table().footer()).html(format(total2, ''));
      $('tr:eq(0) td:eq(3)', api.table().footer()).html(format(total2, ''));
      $('tr:eq(1) td:eq(3)', api.table().footer()).html(format(total2, ''));
    }
  });
  
• allan Posts: 61,657Questions: 1Answers: 10,094 Site admin

  April 2016 Answer ✓

  There are no td cells in your footer - they are th cells :-). If you just change the selectors on lines 10-12 in the above code they should work as expected.

  Allan
• ngungo Posts: 64Questions: 23Answers: 2

  April 2016

  Beautiful.
  Lesson learned.
  Thank you very much.