tablesorter

Grouping Rows Widget

Flexible client-side table sorting

NOTE!

• This widget will only work in tablesorter version 2.8+ and jQuery version 1.7+.
• Please do not use this widget in very large tables or when your table includes multiple tbodies.
• Clicking on any of the sortable header cells will cause the column below it to sort and add a group header.
• Group widget options include:
  • group_collapsible - when true the group headers become clickable and collapse the rows below it.
  • group_count - Allows you to add custom formatting, or remove, the group count within the group header. Set it to false or an empty string to remove the count.
  • group_months, group_week and group_time - Name arrays included so that the language of the date groups can be modified easily.
  • group_formatter - Use this function to modify the group header text before it gets applied. It provides various parameters to make it work for any of the table columns and data. See the comments in the example below for more details.
• Group header class names (when changing the grouping, notice that the sort doesn't change, just the position and names of the group headers):
  • "group-word" (same as "group-word-1") - group the rows using the first word it finds in the column's parsed data.
  • "group-word-n" ("n" can be any number) - group the rows using the nth word in the column*.
  • "group-letter" (same as "group-letter-1") - group the rows using the first letter it finds in the column's parsed data.
  • "group-letter-n" ("n" can be any number) - group the rows using letters 1 through n (if n = 2, then it's the first 2 letters) in the column's parsed data.
  • "group-number" (same as "group-number-1") - group the rows by the number it finds in the column (step of one).
  • "group-number-n" ("n" can be any number) - group the rows into blocks of every n values. So, if n = 10, the groups will be 0-9, 10-19, 20-29, etc
  • "group-date" - group the rows by full date (this shows the current UTC time corrected for your time zone)
  • "group-date-year" - group the rows by year
  • "group-date-month" - group the rows by month*
  • "group-date-day" - group the rows by month/day*
  • "group-date-week" - group the rows by day of the week*
  • "group-date-time" - group the rows by time*
  * When sorting some columns, different group headers with the same group name may exist (try "group-date-week" and "group-date-time"). To make these columns sort specifically by the group you want, you'll need to modify the parser.

Demo

Page Header

<!-- Tablesorter: required -->
<link rel="stylesheet" href="../css/theme.blue.css">
<script src="../js/jquery.tablesorter.js"></script>

<!-- Grouping widget -->
<script src="../js/parsers/parser-input-select.js"></script>
<script src="../js/widgets/widget-grouping.js"></script>

<script>
$(function(){

  $("table").tablesorter({
    theme : 'blue',
    headers: {
      0: { sorter: 'checkbox' },
      3: { sorter: 'select' },
      6: { sorter: 'inputs' }
    },
    widgets: ['group'],
    widgetOptions: {
      group_collapsible : true, // make the group header clickable and collapse the rows below it.
      group_count       : ' ({num})', // if not false, the "{num}" string is replaced with the number of rows in the group
      // change these default date names based on your language preferences
      group_months      : [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ],
      group_week        : [ 'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday' ],
      group_time        : [ 'AM', 'PM' ],
      group_formatter   : function(txt, col, table, c, wo) {
        // txt = current text; col = current column
        // table = current table (DOM); c = table.config; wo = table.config.widgetOptions
        if (col === 7) {
          // remove "GMT-0000 (xxxx Standard Time)" from the end of the full date
          txt = txt.substring(0, txt.indexOf('GMT'));
        }
        return txt === "" ? "Empty" : txt;
      }
    }
  });

});</script>

CSS

HTML