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 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' },
      2: { 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