Sortable Table

SorTable

Add some basic functions like sorting and selecting of rows to an existing table.

For this to work, there needs to be a header row that controls the sorting. This is either:

• "table>thead>tr>th","table>thead>tr>td" or "table>tr[eq:0]>td"

can be specified in the "headSelect" option the rows sorted are either "table>tbody>tr", "table>tr" or "table>tr[pos()>0]" depending on the html layout (i.e. with a thead). the can be specified in the "bodyRowSelect" option. the cells are ALWAYS td for the body!

Every time you call refresh the body will be selected new, so you can use this even with dynamically added tables.

Note that the header cells must be matched by body cells in order for sorting to work. If there is a different amount of body cells there will be unintended effects.

Usage

<table>
  <thead>
     <tr>
        <th class="sortable number">Id</th>
        <th class="sortable">Name</th>
      </tr>
  </thead>
  <tbody class="collection" data-field="data.groups">
     <tr>
       <td>5</td>
       <td>Test1</td>
      </tr>
     <tr>
       <td>8</td>
       <td>ASDF</td>
      </tr>
     <tr>
       <td>1</td>
       <td>Hello World</td>
      </tr>
  </tbody>
</table>

$("table").sorTable({});

Options

{
	/**
	 * add icons in the header: add html snipped.
	 * If empty, nothing will be shown
	 */
	icon: ['<i class="fa fa-sort"></i>', '<i class="fa fa-sort-up"></i>', '<i class="fa fa-sort-down"></i>'],
	/**
	 * selector to get the header cells
	 */
	headSelect: "thead>tr>th",
	/**
	 * select the body
	 */
	bodySelect: "tbody",
	/**
	 * the class in the head that specifies a row that is sortable
	 */
	classSortable: "sortable", 
}

Sorter Class

You can specify the default sorter used by using one of the defaults by specifying the type in the th:

• number: sort as number (0,1,2,3..,9,10,...)
• date: use the Date class to parse the content as date

If nothing is specified it uses a normal string sort.

Custom Sorter

If you add a data-function named sorter on the th then it will used instead.

// get a data attribute from the row
$("th.custom").data().sorter = function(entry) {
   console.log("sorting: ", entry.val);
   if(entry.row.data().pojo) {
      return entry.row.data().pojo.name;
   }
   return entry.val;
};