2015-07-13 17:41:18 +00:00
<!DOCTYPE html>
< html >
< head >
2016-01-10 22:24:57 +00:00
< meta charset = "utf-8" >
< title > jQuery tablesorter 2.0 - Sort2Hash Widget (Beta)< / title >
2015-07-13 17:41:18 +00:00
<!-- jQuery -->
< script src = "js/jquery-latest.min.js" > < / script >
<!-- Demo stuff -->
< link class = "ui-theme" rel = "stylesheet" href = "css/jquery-ui.min.css" >
< script src = "js/jquery-ui.min.js" > < / script >
< link rel = "stylesheet" href = "css/jq.css" >
< link href = "css/prettify.css" rel = "stylesheet" >
< script src = "js/prettify.js" > < / script >
< script src = "js/docs.js" > < / script >
<!-- Tablesorter: required -->
< link rel = "stylesheet" href = "../css/theme.blue.css" >
< script src = "../js/jquery.tablesorter.js" > < / script >
2015-07-22 02:33:15 +00:00
< script src = "../js/jquery.tablesorter.widgets.js" > < / script >
2015-07-13 17:41:18 +00:00
< script src = "../js/widgets/widget-sort2Hash.js" > < / script >
2015-10-31 15:07:27 +00:00
< link rel = "stylesheet" href = "../addons/pager/jquery.tablesorter.pager.css" >
< script src = "../js/widgets/widget-pager.js" > < / script >
2015-07-13 17:41:18 +00:00
< script id = "js" > $ ( f u n c t i o n ( ) {
$( 'table' ).tablesorter({
theme: 'blue',
2015-10-31 15:07:27 +00:00
widgets: [ 'zebra', 'sort2Hash', 'filter' ],
2015-07-13 17:41:18 +00:00
widgetOptions : {
// hash prefix
2015-07-22 02:40:15 +00:00
sort2Hash_hash : '#',
2015-07-13 17:41:18 +00:00
// don't '#' or '=' here
2015-07-22 02:40:15 +00:00
sort2Hash_separator : ',',
2015-07-13 17:41:18 +00:00
// this option > table ID > table index on page
2015-07-22 02:40:15 +00:00
sort2Hash_tableId : null,
2015-10-31 15:07:27 +00:00
// data attribute containing alternate header text
sort2Hash_headerTextAttr : 'data-header',
2015-07-22 02:33:15 +00:00
// direction text shown in the URL e.g. [ 'asc', 'desc' ]
2015-07-22 02:40:15 +00:00
sort2Hash_directionText : [ 0, 1 ], // default values
2015-07-22 02:33:15 +00:00
// if true, override saveSort widget sort, if used & stored sort is available
2015-10-31 15:07:27 +00:00
sort2Hash_overrideSaveSort : true, // default = false
sort2Hash_encodeHash : null,
/* how to use encodeHash
sort2Hash_encodeHash : function( config, tableId, component, value, rawValue ) {
// config = table.config settings
// tableId = processed table ID
// component: 'sort', 'page', 'size' or 'filter'
// value = string value that has encodeURIComponent applied
// rawValue = value ( array or number )
// return false to let the widget encode the string
return '& ' + component + '[' + tableId + ']=' + value;
},
*/
sort2Hash_decodeHash : null,
/*
sort2Hash_decodeHash : function( config, tableId, component ) {
// config = table.config settings
// tableId = processed table ID
// component: 'sort', 'page', 'size' or 'filter'
// return false to let the widget decode the hash
2015-11-09 02:47:30 +00:00
// $.tablesorter.sort2Hash.getParam( parameter, url ); function added in v2.24.4
// parameter = desired parameter to extract
// url (optional) = hash or href string to extract the parameter value from
return $.tablesorter.sort2Hash.getParam( component + '[' + tableId + ']' ) || '';
2015-10-31 15:07:27 +00:00
}
*/
sort2Hash_cleanHash : null,
/*
sort2Hash_cleanHash : function( config, tableId, component, hash ) {
2015-11-09 02:47:30 +00:00
// config = table.config settings
// tableId = processed table ID
// component: 'sort', 'page', 'size' or 'filter'
// return false to let the widget decode the hash
// removeParam function added v2.24.4
return $.tablesorter.sort2Hash.removeParam( component + '[' + tableId + ']' );
2015-10-31 15:07:27 +00:00
}
*/
pager_output : '{startRow:input} to {endRow} ({filteredRows})',
pager_size : 2
2015-07-13 17:41:18 +00:00
}
});
});< / script >
< / head >
< body >
< div id = "banner" >
< h1 > table< em > sorter< / em > < / h1 >
< h2 > Sort2Hash Widget (Beta)< / h2 >
< h3 > Flexible client-side table sorting< / h3 >
< a href = "index.html" > Back to documentation< / a >
< / div >
< div id = "main" >
< p > < / p >
< br >
< div id = "root" class = "accordion" >
< h3 > < a href = "#" > Notes< / a > < / h3 >
< div >
< ul >
2015-11-09 03:56:29 +00:00
< li > In < span class = "version" > v2.24.4< / span > ,
< ul >
< li > Added a < code > getParam< / code > (get URL parameter) & a < code > removeParam< / code > utility function to help deal with parameters in the URL hash. See the "Functions" section below for more details.< / li >
< li > < a href = "https://github.com/alexweissman" > Alex Weissman< / a > has also provided code for a custom hash transformation in < a href = "https://gist.github.com/alexweissman/04eebe93706d3c64d89b" > this gist< / a > ; this code sets hash parameters that include the table id & named columns, e.g. < code > & filter[table0][first_name]=foobar< / code > .< / li >
< / ul >
< / li >
2015-10-31 16:06:09 +00:00
< li > In < span class = "version" > v2.24.0< / span > , lots of changes were made:
2015-10-31 15:07:27 +00:00
< ul >
< li > Removed < code class = "alert" > sort2Hash_useHeaderText< / code > and < code class = "alert" > sort2Hash_processHeaderText< / code > options.< / li >
< li > Added < code > sort2Hash_headerTextAttr< / code > option to replace the above two options.< / li >
< li > Added < code > sort2Hash_encodeHash< / code > , < code > sort2Hash_decodeHash< / code > and < code > sort2Hash_cleanHash< / code > options to allow custom value to hash processing.< / li >
< li > This widget now works with the pager & filter, so the hash now includes pager current page, pager page size and current filters in the hash.< / li >
< li > Lots of internal tweaks.< / li >
< / ul >
< / li >
2015-07-13 17:41:18 +00:00
< li > Added < span class = "version" > v2.22.4< / span > . Instead of using the < a href = "example-widget-savesort.html" > saveSort< / a > widget, this widget updates the hash tag to allow saving & sharing a sort applied to a tablesorter table.< / li >
< li > Sort the tables in the demo below. Notice the changes made to the location hash, then reload the page to have the hash applied to the tables.< / li >
< li > This widget requires jQuery version 1.7+.< / li >
< li > This widget does NOT work with tablesorter v2.0.5.< / li >
< / ul >
< / div >
< h3 > < a href = "#" > Options< / a > < / h3 >
< div >
< h3 > Sort2Hash widget default options (added inside of tablesorter < code > widgetOptions< / code > )< / h3 >
< div class = "tip" >
< span class = "label label-info" > TIP!< / span > Click on the link in the option column to reveal full details (or < a href = "#" class = "toggleAll" > toggle< / a > |< a href = "#" class = "showAll" > show< / a > |< a href = "#" class = "hideAll" > hide< / a > all) or double click to update the browser location.
< / div >
< table class = "tablesorter-blue options" >
< thead >
2015-07-22 02:33:15 +00:00
< tr > < th > Option< / th > < th > Default< / th > < th class = "sorter-false" > Description< / th > < / tr >
2015-07-13 17:41:18 +00:00
< / thead >
< tbody >
< tr id = "sort2hash_hash" >
< td > < span class = "permalink" > sort2hash_hash< / span > < / td >
< td > < code > '#'< / code > < / td >
< td >
The hash should always be there. This option was added to allow setting extra hash parameters and/or hashbang or whatever.
< / td >
< / tr >
< tr id = "sort2hash_separator" >
< td > < a href = "#" class = "permalink" > sort2Hash_separator< / a > < / td >
< td > < code > ','< / code > < / td >
< td >
Change the hash separator using this option. There are some limitations.
< div class = "collapsible" >
< br >
In the location hash, the sort parameters are added as < code > & tableID=column,direction, ... ,column,direction< / code > (no spaces). This option allows changing the column-direction separator, a comma by default, into the chosen separator.
< p > < span class = "label alert" > *NOTE*< / span > Do not set this option to use a hash (< code > #< / code > ), ampersand (< code > & < / code > ) or equal sign (< code > =< / code > ) as it will interfere with how the hash parameters are set up.< / p >
< / div >
< / td >
< / tr >
< tr id = "sort2hash_tableid" >
< td > < a href = "#" class = "permalink" > sort2Hash_tableId< / a > < / td >
< td > < code > null< / code > < / td >
< td >
Set an ID here to override the table id attribute.
< div class = "collapsible" >
< br >
In the location hash, the sort parameters are added as < code > & tableID=column,direction, ... ,column,direction< / code > (no spaces). The < code > tableID< / code > is set by this option.
< p > This option setting is prioritized over the actual table ID attribute. If neither are set, the < code > tableID< / code > will be set as the table's zero-based index on the page.< / p >
< pre class = "prettyprint" > sort2Hash_tableID > table.id attribute > table index< / pre >
< / div >
< / td >
< / tr >
2015-10-31 15:07:27 +00:00
< tr id = "sort2hash_headertextattr" >
< td > < a href = "#" class = "permalink" > sort2Hash_headerTextAttr< / a > < / td >
< td > < code > 'data-header'< / code > < / td >
< td >
Data attribute on header cell containing alternate column identifier added to location hash.
< div class = "collapsible" >
< br >
This option replaces both < code > sort2Hash_useHeaderText< / code > and < code > sort2Hash_processHeaderText< / code > options.
< p > The contents of this attribute will be used in the hash to identify a sorted column.< / p >
< p > Use the header attribute as follows:< / p >
< pre class = "prettyprint lang-js" > < th data-header="first"> First Name< /th> < / pre >
< / div >
< / td >
< / tr >
< tr id = "sort2hash_directiontext" >
< td > < a href = "#" class = "permalink" > sort2Hash_directionText< / a > < / td >
< td > < code > [ 0, 1 ]< / code > < / td >
< td >
Set the direction text shown in the URL.
< div class = "collapsible" >
< br >
Only the first two values will be used from this array. The first value is assigned to ascending sorts and the second is assigned to descending sorts.
< p > Use the option as follows:< / p >
< pre class = "prettyprint lang-js" > sort2Hash_directionText : [ 'asc', 'desc' ]< / pre >
< span class = "label warning" > *NOTE*< / span > When converting the hash into a value, if the direction hash does not match the second value (< code > 'desc'< / code > in the example above), it will fallback to an ascending sort no matter what text in contained within the first value.
< / div >
< / td >
< / tr >
< tr id = "sort2hash_overridesavesort" >
< td > < span class = "permalink" > sort2Hash_overrideSaveSort< / span > < / td >
< td > < code > false< / code > < / td >
< td > if < code > true< / code > , the hash sort will override any stored sort (saveSort widget).< / td >
< / tr >
< tr id = "sort2hash_encodehash" >
< td > < a href = "#" class = "permalink" > sort2Hash_encodeHash< / a > < / td >
< td > < code > null< / code > < / td >
< td >
2015-11-09 02:47:30 +00:00
Add a function to create a custom hash (< span class = "version updated" > v2.24.4< / span > ).
2015-10-31 15:07:27 +00:00
< div class = "collapsible" >
< br >
The following example is a duplicate of the internal code that encodes the hash. Adapt to fit your needs:
< pre class = "prettyprint lang-js" > sort2Hash_encodeHash : function( config, tableId, component, value, rawValue ) {
// config = table.config settings
// tableId = processed table ID
// component: 'sort', 'page', 'size' or 'filter'
// value = string value that has encodeURIComponent applied
// rawValue = value ( array or number )
// return false to let the widget encode the string
return '& ' + component + '[' + tableId + ']=' + value;
}< / pre >
Return a string to add to the < code > window.location.hash< / code > directly.
< p > If this function returns < code > false< / code > , then the internal code will encode the hash for that component. This was done in case only one parameter needs special handling:< / p >
< pre class = "prettyprint lang-js" > sort2Hash_encodeHash : function( config, tableId, component, value, rawValue ) {
// only the filter gets special handling
if ( component === 'filter' ) {
// if working with rawValue, make sure to use
// encodeURIComponent on the results
var newValue = encodeURIComponent( rawValue.join( '--' ) );
return tableId + 'filter=' + newValue;
}
return false;
}< / pre >
< / div >
< / td >
< / tr >
< tr id = "sort2hash_decodehash" >
< td > < a href = "#" class = "permalink" > sort2Hash_decodeHash< / a > < / td >
< td > < code > null< / code > < / td >
< td >
2015-11-09 02:47:30 +00:00
Add a function to process a custom hash (< span class = "version updated" > v2.24.4< / span > ).
2015-10-31 15:07:27 +00:00
< div class = "collapsible" >
< br >
The following example is a duplicate of the internal code that decodes the hash. Adapt to fit your needs:
< pre class = "prettyprint lang-js" > sort2Hash_decodeHash : function( config, tableId, component ) {
// config = table.config settings
// tableId = processed table ID
// component: 'sort', 'page', 'size' or 'filter'
// return false to let the widget decode the hash
2015-11-09 02:47:30 +00:00
// $.tablesorter.sort2Hash.getParam( parameter, url ); function added in v2.24.4
// parameter = desired parameter to extract
// url (optional) = hash or href string to extract the parameter value from
return $.tablesorter.sort2Hash.getParam( component + '[' + tableId + ']' ) || '';
2015-10-31 15:07:27 +00:00
}< / pre >
Return the component value or an empty string.
< p > If this function returns < code > false< / code > , then the internal code will attempt to decode the hash for that component. This was done in case only one parameter needs special handling:< / p >
< pre class = "prettyprint lang-js" > sort2Hash_decodeHash : function( config, tableId, component ) {
// only the filter gets special handling
if ( component === 'filter' ) {
2015-11-09 02:47:30 +00:00
return $.tablesorter.sort2Hash.getParam( tableId + 'filter' ) || '';
2015-10-31 15:07:27 +00:00
}
return false;
}< / pre >
< / div >
< / td >
< / tr >
< tr id = "sort2hash_cleanhash" >
< td > < a href = "#" class = "permalink" > sort2Hash_cleanHash< / a > < / td >
< td > < code > null< / code > < / td >
< td >
2015-11-09 02:47:30 +00:00
Add a function to remove a custom hash (< span class = "version updated" > v2.24.4< / span > ).
2015-10-31 15:07:27 +00:00
< div class = "collapsible" >
< br >
The following example is a duplicate of the internal code that removes unused values in the hash. Adapt to fit your needs:
< pre class = "prettyprint lang-js" > sort2Hash_cleanHash : function( config, tableId, component, hash ) {
2015-11-09 02:47:30 +00:00
// removeParam function added v2.24.4
return $.tablesorter.sort2Hash.removeParam( component + '[' + tableId + ']' );
2015-10-31 15:07:27 +00:00
}< / pre >
Return a string of the remaining components or an empty string.
< p > If this function returns < code > false< / code > , then the internal code will attempt to clean the hash for that component. This was done in case only one parameter needs special handling:< / p >
< pre class = "prettyprint lang-js" > sort2Hash_cleanHash : function( config, tableId, component, hash ) {
2015-11-09 02:47:30 +00:00
// config = table.config settings
// tableId = processed table ID
// component: 'sort', 'page', 'size' or 'filter'
// return false to let the widget decode the hash
2015-10-31 15:07:27 +00:00
if ( component === 'filter' ) {
2015-11-09 02:47:30 +00:00
// removeParam function added v2.24.4
return $.tablesorter.sort2Hash.removeParam( tableId + 'filter' );
/* ORIGINAL METHOD, use if the "getParam" function doesn't work on your custom parameter
2015-10-31 15:07:27 +00:00
var index,
result = [],
2015-11-09 02:47:30 +00:00
// regular expression to match the component & value
2015-10-31 15:07:27 +00:00
regex = new RegExp( tableId + 'filter=([^& ]*)' );
2015-11-09 02:47:30 +00:00
// split hash into component parts
2015-10-31 15:07:27 +00:00
parts = ( hash || '' ).slice(1).split( '& ' ),
2015-11-09 02:47:30 +00:00
len = parts.length;
// cycle through each component part
2015-10-31 15:07:27 +00:00
for ( index = 0; index < len ; index + + ) {
2015-11-09 02:47:30 +00:00
// if the component doesn't match the regular expression...
2015-10-31 15:07:27 +00:00
if ( !regex.test( parts[ index ] ) ) {
2015-11-09 02:47:30 +00:00
// then save it
2015-10-31 15:07:27 +00:00
result.push( parts[ index ] );
}
}
2015-11-09 02:47:30 +00:00
// if we still have something left, join the components back together
// and return it so the next component can be processed
// we don't update the window.location.hash, or the page jumps to the top!
2015-10-31 15:07:27 +00:00
return result.length ? c.widgetOptions.sort2Hash_hash + result.join( '& ' ) : '';
2015-11-09 02:47:30 +00:00
*/
2015-10-31 15:07:27 +00:00
}
return false;
}< / pre >
< / div >
< / td >
< / tr >
< / tbody >
<!-- non - sorting tbody -->
< tbody id = "deprecated" class = "tablesorter-infoOnly" >
< tr > < th colspan = "5" > Deprecated/Removed Options< / th > < / tr >
< / tbody >
< tbody >
2015-07-22 02:33:15 +00:00
< tr id = "sort2hash_useheadertext" >
2015-10-31 15:07:27 +00:00
< td > < a href = "#" class = "permalink alert" > sort2Hash_useHeaderText< / a > < / td >
2015-07-22 02:33:15 +00:00
< td > < code > false< / code > < / td >
< td >
2015-10-31 16:06:09 +00:00
This option has been < span class = "label alert" > removed< / span > in v2.24.0! It has been replaced by < a href = "#" > < code > sort2Hash_headerTextAttr< / code > < / a > .
2015-07-22 02:33:15 +00:00
< div class = "collapsible" >
2015-10-31 15:07:27 +00:00
< p > If < code > true< / code > , text from the header is used instead of a zero-based column index.< / p >
2015-07-22 02:33:15 +00:00
Please be aware that if the column text contains spaces or special characters, they will be encoded in the URL. So, < code > "First £ $€ ¤ ¥ ¢ Name"< / code > will become < code > "First%20%C2%A3$%E2%82%AC%C2%A4%C2%A5%C2%A2%20Name"< / code > . This would make the hash very difficult to read.
< p > Further processing of this header cell text can be done using the < code > sort2Hash_processHeaderText< / code > function.< / p >
< / div >
< / td >
< / tr >
< tr id = "sort2hash_processheadertext" >
2015-10-31 15:07:27 +00:00
< td > < a href = "#" class = "permalink alert" > sort2Hash_processHeaderText< / a > < / td >
2015-07-22 02:33:15 +00:00
< td > < code > null< / code > < / td >
< td >
2015-10-31 16:06:09 +00:00
This option has been < span class = "label alert" > removed< / span > in v2.24.0! It has been replaced by < a href = "#" > < code > sort2Hash_headerTextAttr< / code > < / a > .
2015-07-22 02:33:15 +00:00
< div class = "collapsible" >
2015-10-31 15:07:27 +00:00
< p > If the < code > sort2Hash_useHeaderText< / code > option is < code > true< / code > , a function here will further process the header cell text.< / p >
2015-07-22 02:33:15 +00:00
Use this function to perform any processing on the header cell text, as desired.
< p > At this point, the header cell text has not been encoded.< / p >
< p > Here is one example:< / p >
< pre class = "prettyprint lang-js" > sort2Hash_processHeaderText : function( text, config, columnIndex ) {
// remove all non-alphanumeric characters (including spaces)
return text.replace( /[^a-z0-9]/gi, '' );
}< / pre >
Another example:
< pre class = "prettyprint lang-js" > sort2Hash_processHeaderText : function( text, config, columnIndex ) {
// completely custom text to use for the hash
// this method assumes that the table layout is constant
// (i.e. columns are not added, removed or rearranged)
return [ 'first', 'last', 'age', 'total', 'disc', 'date' ][ columnIndex ];
}< / pre >
< / div >
< / td >
< / tr >
2015-07-13 17:41:18 +00:00
< / tbody >
2015-10-31 15:07:27 +00:00
2015-07-13 17:41:18 +00:00
< / table >
< / div >
2015-11-09 02:47:30 +00:00
< h3 > < a href = "#" > Functions< / a > < / h3 >
< div >
< h3 > Sort2Hash utility functions (added to < code > $.tablesorter.sort2Hash< / code > )< / h3 >
< div class = "tip" >
< span class = "label label-info" > TIP!< / span > Click on the link in the function column to reveal full details (or < a href = "#" class = "toggleAll" > toggle< / a > |< a href = "#" class = "showAll" > show< / a > |< a href = "#" class = "hideAll" > hide< / a > all) or double click to update the browser location.
< / div >
< table class = "tablesorter-blue options" >
< thead >
< tr > < th > Function< / th > < th class = "sorter-false" > Description< / th > < / tr >
< / thead >
< tbody >
< tr id = "getparam" >
< td > < a href = "#" class = "permalink" > getParam< / a > < / td >
< td >
Get URL Parameter (getParam) function
< div class = "collapsible" >
< p > This function will extract the value of the name passed to the function. Use it as follows:< / p >
< pre class = "prettyprint lang-js" > // $.tablesorter.sort2Hash.getParam( name, hash );
// name = parameter name (key)
// hash = (optional) if undefined, it will get the string value from window.location.hash
var hash = '& sort[table-users][user_name]=asc& page[table-users]=1& size[table-users]=10& filter[table-users][user_name]=ad',
result = $.tablesorter.sort2Hash.getParam( 'filter[table-users][user_name]', hash );
// result = "ad";< / pre >
< / div >
< / td >
< / tr >
< tr id = "removeparam" >
< td > < a href = "#" class = "permalink" > removeParam< / a > < / td >
< td >
Remove parameter from hash
< div class = "collapsible" >
< p > This function will remove the key & value from the passed hash. Use it as follows:< / p >
< pre class = "prettyprint lang-js" > // $.tablesorter.sort2Hash.removeParam( name, hash );
// name = parameter name (key)
// hash = (optional) if undefined, it will get the string value from window.location.hash
var hash = '& sort[table-users][user_name]=asc& page[table-users]=1& size[table-users]=10& filter[table-users][user_name]=ad',
result = $.tablesorter.sort2Hash.removeParam( 'filter[table-users][user_name]', hash );
// result = "&sort[table-users][user_name]=asc&page[table-users]=1&size[table-users]=10"; < / pre >
< span class = "label warning" > *NOTE*< / span > This function does not update < code > window.location.hash< / code > .
< / div >
< / td >
< / tr >
< / tbody >
< / table >
< / div >
2015-07-13 17:41:18 +00:00
< / div >
< h1 > Demo< / h1 >
2015-10-31 15:07:27 +00:00
< div id = "demo" > < h3 > Basic Usage < sup class = "results" > † < / sup > < / h3 >
< table >
2015-07-13 17:41:18 +00:00
< thead >
< tr >
< th > First Name< / th >
< th > Last Name< / th >
< th > Age< / th >
< th > Total< / th >
< th > Discount< / th >
< th > Date< / th >
< / tr >
< / thead >
< tbody >
< tr > < td > Peter< / td > < td > Parker< / td > < td > 28< / td > < td > $9.99< / td > < td > 20%< / td > < td > Jul 6, 2006 8:14 AM< / td > < / tr >
< tr > < td > John< / td > < td > Hood< / td > < td > 33< / td > < td > $19.99< / td > < td > 25%< / td > < td > Dec 10, 2002 5:14 AM< / td > < / tr >
< tr > < td > Clark< / td > < td > Kent< / td > < td > 18< / td > < td > $15.89< / td > < td > 44%< / td > < td > Jan 12, 2003 11:14 AM< / td > < / tr >
< tr > < td > Bruce< / td > < td > Almighty< / td > < td > 45< / td > < td > $153.19< / td > < td > 44%< / td > < td > Jan 18, 2001 9:12 AM< / td > < / tr >
< tr > < td > Bruce< / td > < td > Evans< / td > < td > 22< / td > < td > $13.19< / td > < td > 11%< / td > < td > Jan 18, 2007 9:12 AM< / td > < / tr >
< / tbody >
< / table >
2015-11-09 02:51:37 +00:00
< span class = "results" > † < / span > < span class = "xsmall" > This table shows up as "table4" because there is no ID assigned, and it is the fifth table (zero-based index) on the page. The first table is in the "Options" section. The second is actually the stickyheader table for "Options". The third & forth (sticky header) are in the "Functions" section.< / span >
2015-07-13 17:41:18 +00:00
2015-10-31 15:07:27 +00:00
< h3 > Data Header (Using symbols for headers)< / h3 >
2015-07-13 17:41:18 +00:00
< table id = "second" >
< thead >
< tr >
2015-10-31 15:07:27 +00:00
< th data-header = "^" > First Name (^)< / th >
< th data-header = "&" > Last Name (& )< / th >
< th data-header = "#" > Age (#)< / th >
< th data-header = "$" > Total ($)< / th >
< th data-header = "%" > Discount (%)< / th >
< th data-header = "*" > Date (*)< / th >
2015-07-13 17:41:18 +00:00
< / tr >
< / thead >
< tbody >
< tr > < td > Peter< / td > < td > Parker< / td > < td > 28< / td > < td > $9.99< / td > < td > 20%< / td > < td > Jul 6, 2006 8:14 AM< / td > < / tr >
< tr > < td > John< / td > < td > Hood< / td > < td > 33< / td > < td > $19.99< / td > < td > 25%< / td > < td > Dec 10, 2002 5:14 AM< / td > < / tr >
< tr > < td > Clark< / td > < td > Kent< / td > < td > 18< / td > < td > $15.89< / td > < td > 44%< / td > < td > Jan 12, 2003 11:14 AM< / td > < / tr >
< tr > < td > Bruce< / td > < td > Almighty< / td > < td > 45< / td > < td > $153.19< / td > < td > 44%< / td > < td > Jan 18, 2001 9:12 AM< / td > < / tr >
< tr > < td > Bruce< / td > < td > Evans< / td > < td > 22< / td > < td > $13.19< / td > < td > 11%< / td > < td > Jan 18, 2007 9:12 AM< / td > < / tr >
< / tbody >
< / table >
2015-10-31 15:07:27 +00:00
< hr >
< h3 > Pager (page & size)< / h3 >
< div class = "pager" >
< img src = "../addons/pager/icons/first.png" class = "first" alt = "First" / >
< img src = "../addons/pager/icons/prev.png" class = "prev" alt = "Prev" / >
< span class = "pagedisplay" > < / span > <!-- this can be any element, including an input -->
< img src = "../addons/pager/icons/next.png" class = "next" alt = "Next" / >
< img src = "../addons/pager/icons/last.png" class = "last" alt = "Last" / >
< select class = "pagesize" title = "Select page size" >
< option value = "10" > 10< / option >
< option value = "20" > 20< / option >
< option value = "30" > 30< / option >
< option value = "all" > All rows< / option >
< / select >
< select class = "gotoPage" title = "Select page number" > < / select >
< / div >
< table id = "third" class = "widget-pager" >
< thead >
< tr >
< th data-header = "name" > Name< / th >
< th data-header = "major" > Major< / th >
< th data-header = "gender" > Sex< / th >
< th data-header = "english" > English< / th >
< th data-header = "japanese" > Japanese< / th >
< th data-header = "calculus" > Calculus< / th >
< th data-header = "geometry" > Geometry< / th >
< / tr >
< / thead >
< tfoot >
< tr >
< th > Name< / th >
< th > Major< / th >
< th > Sex< / th >
< th > English< / th >
< th > Japanese< / th >
< th > Calculus< / th >
< th > Geometry< / th >
< / tr >
< / tfoot >
< tbody >
< tr > < td > Student01< / td > < td > Languages< / td > < td > male< / td > < td > 80< / td > < td > 70< / td > < td > 75< / td > < td > 80< / td > < / tr >
< tr > < td > Student02< / td > < td > Mathematics< / td > < td > male< / td > < td > 90< / td > < td > 88< / td > < td > 100< / td > < td > 90< / td > < / tr >
< tr > < td > Student03< / td > < td > Languages< / td > < td > female< / td > < td > 85< / td > < td > 95< / td > < td > 80< / td > < td > 85< / td > < / tr >
< tr > < td > Student04< / td > < td > Languages< / td > < td > male< / td > < td > 60< / td > < td > 55< / td > < td > 100< / td > < td > 100< / td > < / tr >
< tr > < td > Student05< / td > < td > Languages< / td > < td > female< / td > < td > 68< / td > < td > 80< / td > < td > 95< / td > < td > 80< / td > < / tr >
< tr > < td > Student06< / td > < td > Mathematics< / td > < td > male< / td > < td > 100< / td > < td > 99< / td > < td > 100< / td > < td > 90< / td > < / tr >
< tr > < td > Student07< / td > < td > Mathematics< / td > < td > male< / td > < td > 85< / td > < td > 68< / td > < td > 90< / td > < td > 90< / td > < / tr >
< tr > < td > Student08< / td > < td > Languages< / td > < td > male< / td > < td > 100< / td > < td > 90< / td > < td > 90< / td > < td > 85< / td > < / tr >
< tr > < td > Student09< / td > < td > Mathematics< / td > < td > male< / td > < td > 80< / td > < td > 50< / td > < td > 65< / td > < td > 75< / td > < / tr >
< tr > < td > Student10< / td > < td > Languages< / td > < td > male< / td > < td > 85< / td > < td > 100< / td > < td > 100< / td > < td > 90< / td > < / tr >
< tr > < td > Student11< / td > < td > Languages< / td > < td > male< / td > < td > 86< / td > < td > 85< / td > < td > 100< / td > < td > 100< / td > < / tr >
< tr > < td > Student12< / td > < td > Mathematics< / td > < td > female< / td > < td > 100< / td > < td > 75< / td > < td > 70< / td > < td > 85< / td > < / tr >
< tr > < td > Student13< / td > < td > Languages< / td > < td > female< / td > < td > 100< / td > < td > 80< / td > < td > 100< / td > < td > 90< / td > < / tr >
< tr > < td > Student14< / td > < td > Languages< / td > < td > female< / td > < td > 50< / td > < td > 45< / td > < td > 55< / td > < td > 90< / td > < / tr >
< tr > < td > Student15< / td > < td > Languages< / td > < td > male< / td > < td > 95< / td > < td > 35< / td > < td > 100< / td > < td > 90< / td > < / tr >
< tr > < td > Student16< / td > < td > Languages< / td > < td > female< / td > < td > 100< / td > < td > 50< / td > < td > 30< / td > < td > 70< / td > < / tr >
< tr > < td > Student17< / td > < td > Languages< / td > < td > female< / td > < td > 80< / td > < td > 100< / td > < td > 55< / td > < td > 65< / td > < / tr >
< tr > < td > Student18< / td > < td > Mathematics< / td > < td > male< / td > < td > 30< / td > < td > 49< / td > < td > 55< / td > < td > 75< / td > < / tr >
< tr > < td > Student19< / td > < td > Languages< / td > < td > male< / td > < td > 68< / td > < td > 90< / td > < td > 88< / td > < td > 70< / td > < / tr >
< tr > < td > Student20< / td > < td > Mathematics< / td > < td > male< / td > < td > 40< / td > < td > 45< / td > < td > 40< / td > < td > 80< / td > < / tr >
< tr > < td > Student21< / td > < td > Languages< / td > < td > male< / td > < td > 50< / td > < td > 45< / td > < td > 100< / td > < td > 100< / td > < / tr >
< tr > < td > Student22< / td > < td > Mathematics< / td > < td > male< / td > < td > 100< / td > < td > 99< / td > < td > 100< / td > < td > 90< / td > < / tr >
< tr > < td > Student23< / td > < td > Mathematics< / td > < td > male< / td > < td > 82< / td > < td > 77< / td > < td > 0< / td > < td > 79< / td > < / tr >
< tr > < td > Student24< / td > < td > Languages< / td > < td > female< / td > < td > 100< / td > < td > 91< / td > < td > 13< / td > < td > 82< / td > < / tr >
< tr > < td > Student25< / td > < td > Mathematics< / td > < td > male< / td > < td > 22< / td > < td > 96< / td > < td > 82< / td > < td > 53< / td > < / tr >
< tr > < td > Student26< / td > < td > Languages< / td > < td > female< / td > < td > 37< / td > < td > 29< / td > < td > 56< / td > < td > 59< / td > < / tr >
< tr > < td > Student27< / td > < td > Mathematics< / td > < td > male< / td > < td > 86< / td > < td > 82< / td > < td > 69< / td > < td > 23< / td > < / tr >
< tr > < td > Student28< / td > < td > Languages< / td > < td > female< / td > < td > 44< / td > < td > 25< / td > < td > 43< / td > < td > 1< / td > < / tr >
< tr > < td > Student29< / td > < td > Mathematics< / td > < td > male< / td > < td > 77< / td > < td > 47< / td > < td > 22< / td > < td > 38< / td > < / tr >
< tr > < td > Student30< / td > < td > Languages< / td > < td > female< / td > < td > 19< / td > < td > 35< / td > < td > 23< / td > < td > 10< / td > < / tr >
< tr > < td > Student31< / td > < td > Mathematics< / td > < td > male< / td > < td > 90< / td > < td > 27< / td > < td > 17< / td > < td > 50< / td > < / tr >
< tr > < td > Student32< / td > < td > Languages< / td > < td > female< / td > < td > 60< / td > < td > 75< / td > < td > 33< / td > < td > 38< / td > < / tr >
< tr > < td > Student33< / td > < td > Mathematics< / td > < td > male< / td > < td > 4< / td > < td > 31< / td > < td > 37< / td > < td > 15< / td > < / tr >
< tr > < td > Student34< / td > < td > Languages< / td > < td > female< / td > < td > 77< / td > < td > 97< / td > < td > 81< / td > < td > 44< / td > < / tr >
< tr > < td > Student35< / td > < td > Mathematics< / td > < td > male< / td > < td > 5< / td > < td > 81< / td > < td > 51< / td > < td > 95< / td > < / tr >
< tr > < td > Student36< / td > < td > Languages< / td > < td > female< / td > < td > 70< / td > < td > 61< / td > < td > 70< / td > < td > 94< / td > < / tr >
< tr > < td > Student37< / td > < td > Mathematics< / td > < td > male< / td > < td > 60< / td > < td > 3< / td > < td > 61< / td > < td > 84< / td > < / tr >
< tr > < td > Student38< / td > < td > Languages< / td > < td > female< / td > < td > 63< / td > < td > 39< / td > < td > 0< / td > < td > 11< / td > < / tr >
< tr > < td > Student39< / td > < td > Mathematics< / td > < td > male< / td > < td > 50< / td > < td > 46< / td > < td > 32< / td > < td > 38< / td > < / tr >
< tr > < td > Student40< / td > < td > Languages< / td > < td > female< / td > < td > 51< / td > < td > 75< / td > < td > 25< / td > < td > 3< / td > < / tr >
< tr > < td > Student41< / td > < td > Mathematics< / td > < td > male< / td > < td > 43< / td > < td > 34< / td > < td > 28< / td > < td > 78< / td > < / tr >
< tr > < td > Student42< / td > < td > Languages< / td > < td > female< / td > < td > 11< / td > < td > 89< / td > < td > 60< / td > < td > 95< / td > < / tr >
< tr > < td > Student43< / td > < td > Mathematics< / td > < td > male< / td > < td > 48< / td > < td > 92< / td > < td > 18< / td > < td > 88< / td > < / tr >
< tr > < td > Student44< / td > < td > Languages< / td > < td > female< / td > < td > 82< / td > < td > 2< / td > < td > 59< / td > < td > 73< / td > < / tr >
< tr > < td > Student45< / td > < td > Mathematics< / td > < td > male< / td > < td > 91< / td > < td > 73< / td > < td > 37< / td > < td > 39< / td > < / tr >
< tr > < td > Student46< / td > < td > Languages< / td > < td > female< / td > < td > 4< / td > < td > 8< / td > < td > 12< / td > < td > 10< / td > < / tr >
< tr > < td > Student47< / td > < td > Mathematics< / td > < td > male< / td > < td > 89< / td > < td > 10< / td > < td > 6< / td > < td > 11< / td > < / tr >
< tr > < td > Student48< / td > < td > Languages< / td > < td > female< / td > < td > 90< / td > < td > 32< / td > < td > 21< / td > < td > 18< / td > < / tr >
< tr > < td > Student49< / td > < td > Mathematics< / td > < td > male< / td > < td > 42< / td > < td > 49< / td > < td > 49< / td > < td > 72< / td > < / tr >
< tr > < td > Student50< / td > < td > Languages< / td > < td > female< / td > < td > 56< / td > < td > 37< / td > < td > 67< / td > < td > 54< / td > < / tr >
< / tbody >
< / table >
2015-07-13 17:41:18 +00:00
< / div >
< h1 > Javascript< / h1 >
< div id = "javascript" >
< pre class = "prettyprint lang-javascript" > < / pre >
< / div >
< h1 > HTML< / h1 >
< div id = "html" >
< pre class = "prettyprint lang-html" > < / pre >
< / div >
< / div >
< / body >
< / html >
