Multi-rows Footer

ngungo

Test case: http://cochin.us/foo
I have read everything in this forum about multi-row issue including: https://www.datatables.net/forums/discussion/16866/how-can-we-have-multiple-rows-in-the-footer-of-a-datatable

I do put the column total into the 1st row cell but I need to put this total into the second row instead. My question is how do I put the column total into the second row cell of footer.

Thanks,
ngungo

ngungo

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

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

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

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

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

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

Allan

ngungo

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

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

Beautiful.
Lesson learned.
Thank you very much.