Question

I’m looking for a jQuery-solution which enables sorting and grouping by columns; then, in the footer section, it should be possible to show the sum of all values above.

Example: I’ve got three columns: Country, Date and Sales:

US     20120714       50
DE     20120714       40
BR     20120714       30
US     20120715       60
DE     20120715       60
BR     20120715       20

If I sort by country:

BR     20120714       30
BR     20120715       20
                      50
DE     20120714       40
DE     20120715       60
                     100
US     20120714       50
US     20120715       60
                     110

If I sort by date:

BR     20120714       30
DE     20120714       40
US     20120714       50
                     120
BR     20120715       20
DE     20120715       60
US     20120715       60
                     140

and so on…

Is there a plugin available for this?

Answer 1

As already suggested, Datatables is a nice and easy-to-use JQuery plugin fitting your needs. It supports sorting out of the box, and also grouping can be done. See this example.
You can also modify the footer to show the sum of a column, like in this example.

You can, however, also use the fnDrawCallback function. It is called every time your table is drawn and offers you the possibility to modify HOW it should be drawn.

Example:

"fnDrawCallback": function (oSettings) {
    // Get all rows of your table
    var nTrs = $tableElement.find('tbody tr');
    // Enumerate all rows
    var sum = 0;
    for (var i = 0; i < nTrs.length; i++) {
         var iDisplayIndex = oSettings._iDisplayStart + i;
         var dataIndex = oSettings.aiDisplay[iDisplayIndex];
         sum += oSettings.aoData[dataIndex]._aData.{your item};
    }
    // Insert sum at the end
    $tableElement.find(' tbody tr:last').after('<p>'+sum+'</p>');

In this example, the variable $tableElement contains the JQuery object for your datatable instance.