595 lines
29 KiB
HTML
595 lines
29 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>jQuery tablesorter 2.0 - Sort2Hash Widget (Beta)</title>
|
|
|
|
<!-- 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>
|
|
<script src="../js/jquery.tablesorter.widgets.js"></script>
|
|
<script src="../js/widgets/widget-sort2Hash.js"></script>
|
|
|
|
<link rel="stylesheet" href="../addons/pager/jquery.tablesorter.pager.css">
|
|
<script src="../js/widgets/widget-pager.js"></script>
|
|
|
|
<script id="js">$(function() {
|
|
|
|
$( 'table' ).tablesorter({
|
|
theme: 'blue',
|
|
widgets: [ 'zebra', 'sort2Hash', 'filter' ],
|
|
widgetOptions : {
|
|
// hash prefix
|
|
sort2Hash_hash : '#',
|
|
// don't '#' or '=' here
|
|
sort2Hash_separator : ',',
|
|
// this option > table ID > table index on page
|
|
sort2Hash_tableId : null,
|
|
// data attribute containing alternate header text
|
|
sort2Hash_headerTextAttr : 'data-header',
|
|
// direction text shown in the URL e.g. [ 'asc', 'desc' ]
|
|
sort2Hash_directionText : [ 0, 1 ], // default values
|
|
// if true, override saveSort widget sort, if used & stored sort is available
|
|
sort2Hash_overrideSaveSort : true, // default = false
|
|
// if true, hash changes are not saved to browser history
|
|
sort2Hash_replaceHistory : 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
|
|
|
|
// $.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 + ']' ) || '';
|
|
}
|
|
*/
|
|
sort2Hash_cleanHash : null,
|
|
/*
|
|
sort2Hash_cleanHash : function( config, tableId, component, hash ) {
|
|
// 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 + ']' );
|
|
}
|
|
*/
|
|
pager_output : '{startRow:input} to {endRow} ({filteredRows})',
|
|
pager_size : 2
|
|
}
|
|
});
|
|
|
|
});</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>
|
|
<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>
|
|
<li>In <span class="version">v2.24.0</span>, lots of changes were made:
|
|
<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>
|
|
<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>
|
|
<tr><th>Option</th><th>Default</th><th class="sorter-false">Description</th></tr>
|
|
</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>
|
|
|
|
<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_replacehistory">
|
|
<td><a href="#" class="permalink">sort2Hash_replaceHistory</a></td>
|
|
<td><code>false</code></td>
|
|
<td>Change how the browser history is managed (<span class="version">v2.29.0</span>)
|
|
<div class="collapsible">
|
|
<p>If <code>true</code>, all hash changes are not saved to browser history, so when the user presses the back arrow, they will be returned to the previous page.</p>
|
|
If <code>false</code>, all hash changes are preserved in the browser history, so when the user presses the back arrow, the hash will show the previous state, but the table won't update unless the page is refreshed.
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="sort2hash_encodehash">
|
|
<td><a href="#" class="permalink">sort2Hash_encodeHash</a></td>
|
|
<td><code>null</code></td>
|
|
<td>
|
|
Add a function to create a custom hash (<span class="version updated">v2.24.4</span>).
|
|
<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>
|
|
Add a function to process a custom hash (<span class="version updated">v2.24.4</span>).
|
|
<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
|
|
|
|
// $.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 + ']' ) || '';
|
|
}</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' ) {
|
|
return $.tablesorter.sort2Hash.getParam( tableId + 'filter' ) || '';
|
|
}
|
|
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>
|
|
Add a function to remove a custom hash (<span class="version updated">v2.24.4</span>).
|
|
<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 ) {
|
|
// removeParam function added v2.24.4
|
|
return $.tablesorter.sort2Hash.removeParam( component + '[' + tableId + ']' );
|
|
}</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 ) {
|
|
// config = table.config settings
|
|
// tableId = processed table ID
|
|
// component: 'sort', 'page', 'size' or 'filter'
|
|
// return false to let the widget decode the hash
|
|
|
|
if ( component === 'filter' ) {
|
|
// 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
|
|
var index,
|
|
result = [],
|
|
// regular expression to match the component & value
|
|
regex = new RegExp( tableId + 'filter=([^&]*)' );
|
|
// split hash into component parts
|
|
parts = ( hash || '' ).slice(1).split( '&' ),
|
|
len = parts.length;
|
|
// cycle through each component part
|
|
for ( index = 0; index < len; index++ ) {
|
|
// if the component doesn't match the regular expression...
|
|
if ( !regex.test( parts[ index ] ) ) {
|
|
// then save it
|
|
result.push( parts[ index ] );
|
|
}
|
|
}
|
|
// 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!
|
|
return result.length ? c.widgetOptions.sort2Hash_hash + result.join( '&' ) : '';
|
|
*/
|
|
}
|
|
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>
|
|
<tr id="sort2hash_useheadertext">
|
|
<td><a href="#" class="permalink alert">sort2Hash_useHeaderText</a></td>
|
|
<td><code>false</code></td>
|
|
<td>
|
|
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>.
|
|
<div class="collapsible">
|
|
<p>If <code>true</code>, text from the header is used instead of a zero-based column index.</p>
|
|
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">
|
|
<td><a href="#" class="permalink alert">sort2Hash_processHeaderText</a></td>
|
|
<td><code>null</code></td>
|
|
<td>
|
|
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>.
|
|
<div class="collapsible">
|
|
<p>If the <code>sort2Hash_useHeaderText</code> option is <code>true</code>, a function here will further process the header cell text.</p>
|
|
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>
|
|
</tbody>
|
|
|
|
</table>
|
|
</div>
|
|
|
|
<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>
|
|
|
|
</div>
|
|
|
|
<h1>Demo</h1>
|
|
<div id="demo"><h3>Basic Usage <sup class="results">†</sup></h3>
|
|
<table>
|
|
<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>
|
|
<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>
|
|
|
|
<h3>Data Header (Using symbols for headers)</h3>
|
|
<table id="second">
|
|
<thead>
|
|
<tr>
|
|
<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>
|
|
</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>
|
|
|
|
<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>
|
|
|
|
</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>
|