Multi-rows Footer

Multi-rows Footer

ngungongungo Posts: 64Questions: 23Answers: 2

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

This question has an accepted answers - jump to answer

Answers

  • ngungongungo Posts: 64Questions: 23Answers: 2

    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.

  • allanallan Posts: 54,574Questions: 1Answers: 8,534 Site admin

    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

  • ngungongungo Posts: 64Questions: 23Answers: 2

    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

  • allanallan Posts: 54,574Questions: 1Answers: 8,534 Site admin

    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

  • ngungongungo Posts: 64Questions: 23Answers: 2

    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, ''));
      }
    });
    
  • allanallan Posts: 54,574Questions: 1Answers: 8,534 Site admin

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

    Allan

  • ngungongungo Posts: 64Questions: 23Answers: 2

    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, ''));
      }
    });
    
  • allanallan Posts: 54,574Questions: 1Answers: 8,534 Site admin
    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

  • ngungongungo Posts: 64Questions: 23Answers: 2

    Beautiful.
    Lesson learned.
    Thank you very much.

This discussion has been closed.