Logo
Navigation
Home Libraries Gadgets Best Practices jQuery Tips Support Resources / Links JS Knowledge Base Donate! About Me AJAX Toolbox
Libraries
Calendar Popup Checkbox Group Data Dumper Data Validation Date Functions DHTML Tree Draggable Iframes Dependent Select Boxes Form Functions Object Position Option Transfer Popups (In-Page DIV) Selectbox Functions Table Sorting And Utils Util/DOM/CSS/Event
doctype [?]
[strict] [loose] [none]

Table Sorting, Filtering, Etc - BETA!
Documentation

Automatically Adding Functionality With CSS Classes

Much of the functionality of this library - including sorting, filtering, and paging - can be accomplished without any coding at all. Instead, CSS classes can be put on tables and cells to have the functionality automatically added when the page loads. The following table lists the classes that can be used and what they do. Values are "passed" to the script by appending numbers or strings to the end of some class name prefixes.

Class Name Applies To Action Taken On Page Load Example
Striping
table-stripeclass:* table The class name that should be applied to alternate rows when autostriped or after any sorting, filtering, or paging. <table class="table-stripeclass:alternate">
Apply the class name "alternate" to odd rows.
table-autostripe table Odd table rows (first row is 0) are automatically striped using the class specified with table-rowshade-* <table class="table-autostripe table-rowshade-alternate">
Sorting
table-autosort table The table will be automatically setup for sorting for columns that have autosort definitions using table-sortable:*
If you have no cells in your thead marked as table-sortable, then this will have no effect.		 <table class="table-autosort">
table-autosort:# table The table will be automatically setup for sorting for columns that have autosort definitions using table-sortable:*, and the table will be sorted on load by the column index supplied. The first column is 0. <table class="table-autosort:2">
The table will be setup for sorting and then be automatically sorted by the 3rd column (index 2).
table-sortable:* thead > th,
thead > td		 When used in a TH or TD in the THEAD section of a table, this class defines the data type of the column for sorting. Only columns flagged with this class in an autosort table will have sorting functionality added. The onclick value of the cell will be over-written if it already exists.
Built-in sort types are: alphanumeric, numeric, numeric_comma (for countries that use 1.234.567,89), ignorecase, currency, currency_comma, date.
New sort types may be added, and those sort types can then be used in this class name. 		<th class="table-sortable:numeric">
table-nosort tbody By default, all tbody sections of a table are sorted. If this class is applied to a tbody, then no sorting will be done within this tbody. <tbody class="table-nosort">
Filtering
table-autofilter table Create automatic filters on columns in the table that also use the class table-filterable <th class="table-autofilter">
table-filterable thead > th,
thead > td		 Used to identify a column header as filterable, so that the autofilter functionality will be added. Not all columns in a table typically need filtering, so this class must be used to identify those that do. In the case of manually-added filtering, only headers with this class name will get the table-filtered class applied. <th class="table-filterable">
table-filtered-rowcount:* * When a table is filtered, the innerHTML of the object with this ID will be replaced with the number of rows that match all current filters. <td class="table-filtered-rowcount:visiblerowspan">
table-rowcount:* * When a table is filtered, the innerHTML of the object with this ID will be replaced with the total number of rows in the table, including those that have been filtered out. <td class="table-rowcount:totalrowspan">
Paging
table-autopage:# table Automatically split the table into "pages" of N number of rows each. The mechanism to trigger the paging will either need to be created manually or by using the classes below. The table will default to displaying the first page. <table class="table-autopage:10">
Display 10 rows of the table at a time
table-page:* thead > th,
thead > td,
tfoot > th,
tfoot > td		 Adds the functionality to flip "pages" of the table to the cell's onclick property, overwriting the action if it already exists. Possible values are "table-page:next" to go to the next page, "table-page:previous" to go to the previous page, and "table-page:#" to jump # number of pages. Paging will not allow go past the first or last page. <td class="table-page:next">
Go to the next page of the table when the cell is clicked <td class="table-page:-5">
Jump back 5 pages
table-page-number:* thead > th,
thead > td,
tfoot > th,
tfoot > td		 When a table is paged or filtered, the innerHTML of the object with this ID will be replaced with the page number that is currently being displayed. Only 1 object is allowed to map to the page number. <td class="table-page-number:table1page">
table-page-count:* thead > th,
thead > td,
tfoot > th,
tfoot > td		 When a table is paged or filtered, the innerHTML of the object with this ID will be replaced with the total number of pages that are available based on page size. Only 1 cell is allowed to map to the page count. <td class="table-page-count:table1pagecount">

Styling Tables With CSS Classes

The display of sort indicators, filter icons, and row striping is all controlled via CSS classes. When an action is taken on a table, classes are applied to objects. It is up to the page developer to write rules for these classes in CSS to display their tables as they wish. Typically for sort icons, a css background-image declaration can be used.

Class Name Applies To Action Taken On Page Load Example
Sorting
table-sortable thead>th
thead>td		 Column headers of sortable columns will receive this class, which can be used for example to put an icon in the header to show that the column is sortable but not currently sorted. <th class="table-sortable">
table-sorted-asc thead>th
thead>td		 When a column is sorted in ascending order, column headers in the same column that have the table-sortable class will also get this class applied. Only those that have the table-sortable class will get this class, because your thead may have multiple rows but you don't want every cell in the column to get the sort class. This class can be used, for example, to put an icon in the header that indicates the column is sorted. <th class="table-sorted-asc">
table-sorted-desc thead>th
thead>td		 Same as table-sorted-asc, but applied when the column is sorted in descending order. <th class="table-sorted-desc">
Filtering
table-filtered thead>th
thead>td		 When a column is filtered, each column header that has the table-filterable class will also receive this class. It can be used to show a filter icon, for example. <th class="table-filtered">

More documentation coming very soon...

Logo All Contents Copyright © Matt Kruse