mirror of
https://github.com/Mottie/tablesorter.git
synced 2025-01-12 15:24:21 +00:00
Add API section; update docs, accordion & dates
Add tablesorter API section to docs. Make assorted corrections to docs & cleanup. Update & consolidate jQuery UI accordion code. Updated some scripts to use the correct version number (v2.15, not v2.14.6).
This commit is contained in:
Mottie
parent
9ca70917df
commit
5d4955aef8
@ -1,6 +1,6 @@
|
||||
/*!
|
||||
* tablesorter pager plugin
|
||||
* updated 12/16/2013 (v2.14.5)
|
||||
* updated 1/21/2014 (v2.15.0)
|
||||
*/
|
||||
/*jshint browser:true, jquery:true, unused:false */
|
||||
;(function($) {
|
||||
@ -64,8 +64,8 @@
|
||||
// Save pager page & size if the storage script is loaded (requires $.tablesorter.storage in jquery.tablesorter.widgets.js)
|
||||
savePages: true,
|
||||
|
||||
//defines custom storage key
|
||||
storageKey:'tablesorter-pager',
|
||||
// defines custom storage key
|
||||
storageKey: 'tablesorter-pager',
|
||||
|
||||
// if true, the table will remain the same height no matter how many records are displayed. The space is made up by an empty
|
||||
// table row set to a height to compensate; default is false
|
||||
|
||||
@ -9,19 +9,24 @@ kbd {margin:0px 0.1em; padding:0.1em 0.6em;border-radius: 3px;border: 1px solid
|
||||
.demo h1,.demo h1 a {font-size:120%;text-align:center;text-decoration:none;color:#000;}
|
||||
.demo p,.center {text-align:center;}
|
||||
.demo table.tablesorter {font-size:14px;}
|
||||
table th {vertical-align:top;}
|
||||
#config th {text-shadow:none;}
|
||||
table td.info { background: #eee; }
|
||||
table.info {border:#000 1px solid;border-collapse:collapse;margin:10px 0 0 10px;}
|
||||
table.tablesorter table.info tbody th,table.tablesorter table.info td {border:#000 1px solid;}
|
||||
table.tablesorter table.info tbody th {background:#eee;}
|
||||
table.options {width:100%;}
|
||||
table.options pre {width:95%;}
|
||||
table.options .property {width:115px;}
|
||||
table.options .property, .setWidth {width:115px;}
|
||||
table.options .type {width:80px; }
|
||||
table.options .defaults {width:200px;}
|
||||
table.options .defaults {width:160px;}
|
||||
table.options .examples {width:60px;}
|
||||
table.compatibility { width: 50%; float: right; font-size: .8em; margin-left: 20px; }
|
||||
table.compatibility th,table.compatibility td { text-align: center; padding: 2px; }
|
||||
pre,#display {overflow-x:auto;padding:15px;border:1px solid #ddd;border-left-width:5px;}
|
||||
pre.lang-js, pre.lang-javascript {border-left-color: #f1bf26;}
|
||||
pre.lang-html {border-left-color: #ef6328;}
|
||||
pre.lang-css {border-left-color: #27aae2;}
|
||||
pre,#display {background-color:#eee;font-size:small;list-style:none;}
|
||||
pre.prettyprint {padding:5px;}
|
||||
code {background-color: #e6e6e6; padding: 1px 5px;}
|
||||
@ -34,7 +39,7 @@ pre.normal {background-color:transparent;border:none;border-left-width:0;overflo
|
||||
#start,#case,.bright {color:#007baa;}
|
||||
#demo strong {color:#a00;}
|
||||
hr {height:1px;}
|
||||
ul {list-style:square;}
|
||||
ul {list-style:square;padding-left:20px;}
|
||||
#banner {margin:20px 20px 5px 20px;padding:0;text-align:left;}
|
||||
#banner *,.demo h1,.demo h1 em {color:#232121;font-family:Georgia, Palatino, Times New Roman;font-size:30px;font-style:normal;font-weight:400;margin:0;padding:0;}
|
||||
#banner h1 {display:block;float:left;}
|
||||
@ -45,17 +50,20 @@ ul {list-style:square;}
|
||||
#banner a {display:block;font-size:14px;margin:5px 0 0;padding:10px 0 0;float:right;}
|
||||
.github-btn {border:0;overflow:hidden;vertical-align: middle;}
|
||||
a.external {background-image:url(../img/external.png);background-position:center right;background-repeat:no-repeat;padding-right:12px;}
|
||||
a.link {background-image:url(../img/link.png);background-position:center right;background-repeat:no-repeat;padding-right:12px;}
|
||||
form {font-size:10pt;margin-bottom:20px;width:auto;}
|
||||
form fieldset {padding:10px;text-align:left;width:140px;}
|
||||
div#main h1 {border-bottom:1px solid #cdcdcd;display:block;padding:4px 0 2px;}
|
||||
table#tablesorter-demo {margin: 10px 0 0 0;}
|
||||
table, p.small,.smallcode code {font-size:small;}
|
||||
p.small {padding-left: 25px;}
|
||||
.xsmall {font-size:11px;}
|
||||
p.tip em, div.tip em,.label-info {padding: 2px; background-color: #5bc0de; color: #fff; border-radius: .25em;}
|
||||
.label { padding: 0.1em 0.6em 0.1em; font-size: 75%; color: #fff; border-radius: .25em; }
|
||||
span.tip em, .label-success { background-color: #5cb85c; }
|
||||
span.tip.old em, .label-default { background-color: #999; }
|
||||
span.warn em { background-color: #ce5300; }
|
||||
span.warn em, .label.alert { background-color: #d9534f; }
|
||||
.label.warning { background-color: #f0ad4e; }
|
||||
tr td.lookhere, span.lookhere { background-color: rgba(230,191,153,0.5); }
|
||||
.ui-slider .ui-slider-handle { width: 0.8em; height: 0.8em; }
|
||||
div.digg {float: right;}
|
||||
@ -66,15 +74,19 @@ div.digg {float: right;}
|
||||
#pager-demo th.remove { width: 20px; } /* pager demo */
|
||||
#pager-demo button.remove { width: 20px; height: 20px; font-size: 10px; color: #800; }
|
||||
.box { width: 48%; min-width: 300px; float: left; padding: 0 1%; }
|
||||
td a.alert { color: #a00; padding: 0; }
|
||||
a.alert { color: #a00; padding: 0; }
|
||||
span.alert { padding: 1px 3px; }
|
||||
.hidden { display: none; }
|
||||
.results { color: red; }
|
||||
.clear { clear: both; }
|
||||
.bootstrap_buttons button { margin: 5px 0 0 0; }
|
||||
#main .ui-accordion-header a { font-size: 14px; margin-left: 24px; }
|
||||
#main .ui-accordion-header a { font-size: 14px; }
|
||||
#main .ui-accordion-content { font-size: 14px; }
|
||||
.accordion { position: relative; }
|
||||
.accordion .accordion-link { position: absolute; right: 1%; margin-top: 16px; z-index: 1; width: 12px; height: 12px;}
|
||||
.remark, .error { font-weight: bold; color: red; font-size: 18px; }
|
||||
table th.nobold { font-weight: normal; }
|
||||
table th a { text-decoration: underline; color: #000; }
|
||||
#group #slider0,#group #slider1,#group #slider2 { width: 100px; height: 3px; font-size: 0.8em; display: inline-block; margin-left: 10px; }
|
||||
#group .demo-label { display: inline-block; min-width: 120px; }
|
||||
@media all and (max-width: 650px) {
|
||||
|
||||
@ -87,6 +87,7 @@
|
||||
<li>Click the link in the Order # column to reveal the hidden child row cells (<a href="http://www.pengoworks.com/workshop/jquery/tablesorter/tablesorter.htm">original demo</a>). This option is available in the original plugin.</li>
|
||||
<li>The filter widget will work with the original tablesorter plugin, just include the jquery.tablesorter.widget.js file and initialize the widget as seen below.</li>
|
||||
<li>Combining the filter widget and pager plugin will not work as expected.</li>
|
||||
</ul>
|
||||
</p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
|
||||
@ -37,6 +37,8 @@
|
||||
<li>Click on any column header to sort that column.</li>
|
||||
<li>The alphanumeric sort working in the first column was added in version 2.0.6 (not part of the original plugin).</li>
|
||||
<li>The above sort was replaced with a natural sort in version 2.2.</li>
|
||||
<li>This example demonstrates that common table values are auto-detected (including plain text, currency, percentages, and positive & negative numbers), so there is no need to set a specific parser unless you notice an issue with how a column is sorting.</li>
|
||||
<li>Issues may arise if a column contains mixed data, e.g. "N/A" is located at the top of a numeric column; in this case the column will be detected as a text column and not a numeric column. If issues occur, add a <code>sorter-digit</code> class name to that header cell.</li>
|
||||
</ul>
|
||||
</p>
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Set an initial sort order</title>
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Set an initial table sort</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
|
||||
@ -19,12 +19,16 @@
|
||||
|
||||
<script id="js">$(function() {
|
||||
|
||||
// call the tablesorter plugin
|
||||
$("table").tablesorter({
|
||||
// initial sort set using sortList option
|
||||
$(".table1").tablesorter({
|
||||
theme : 'blue',
|
||||
// sort on the first column and second column in ascending order
|
||||
sortList: [[0,0],[1,0]]
|
||||
});
|
||||
|
||||
// sort on the first column and third column in ascending order
|
||||
sortList: [[0,0],[2,0]]
|
||||
// initial sort set using data-sortlist attribute (see HTML below)
|
||||
$(".table2").tablesorter({
|
||||
theme : 'blue'
|
||||
});
|
||||
|
||||
});</script>
|
||||
@ -38,7 +42,65 @@
|
||||
</div>
|
||||
<div id="main">
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
<h4>Set initial sort using the sortList option</h4>
|
||||
<table class="table1 tablesorter">
|
||||
<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>
|
||||
|
||||
<h4>Set initial sort using a data attribute</h4>
|
||||
<div id="demo"><!-- this data-sortlist method requires jQuery v1.4+ -->
|
||||
<table class="table2" data-sortlist="[[0,0],[2,0]]">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First Name</th>
|
||||
|
||||
@ -5,13 +5,13 @@
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Pager plugin - Ajax</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link class="ui-theme" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/cupertino/jquery-ui.css">
|
||||
<link class="ui-theme" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/cupertino/jquery-ui.css">
|
||||
<link href="css/jq.css" rel="stylesheet">
|
||||
<link href="css/prettify.css" rel="stylesheet">
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7/jquery-ui.min.js"></script>
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
|
||||
<script src="js/prettify.js"></script>
|
||||
<script src="js/docs.js"></script>
|
||||
|
||||
@ -26,15 +26,6 @@
|
||||
<!-- Tablesorter: optional -->
|
||||
<script src="../js/jquery.tablesorter.widgets.js"></script>
|
||||
|
||||
<script>
|
||||
$(function(){
|
||||
$('.accordion').accordion({
|
||||
autoHeight: false,
|
||||
collapsible : true
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<script id="js">$(function(){
|
||||
|
||||
// Initialize tablesorter
|
||||
|
||||
@ -59,7 +59,7 @@ $(function() {
|
||||
<div id="main">
|
||||
|
||||
<div class="tip">
|
||||
Notes about the <code>addWidget</code> template:
|
||||
Notes about the <code>addParser</code> template:
|
||||
<ul>
|
||||
<li>The <code>id</code> block is required and must be unique.</li>
|
||||
<li>The <code>is</code> block will allow the parser to be used for autodetecting the parser
|
||||
|
||||
@ -7,8 +7,8 @@
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link class="ui-theme" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/themes/cupertino/jquery-ui.css">
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
|
||||
<link class="ui-theme" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/cupertino/jquery-ui.css">
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/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>
|
||||
|
||||
@ -8,8 +8,8 @@
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link class="ui-theme" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/themes/cupertino/jquery-ui.css">
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
|
||||
<link class="ui-theme" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/cupertino/jquery-ui.css">
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/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>
|
||||
@ -22,15 +22,6 @@
|
||||
|
||||
<script src="../js/widgets/widget-columnSelector.js"></script>
|
||||
|
||||
<script>
|
||||
$(function(){
|
||||
$('.accordion').accordion({
|
||||
heightStyle: 'content',
|
||||
collapsible : true
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style id="css">.columnSelectorWrapper {
|
||||
position: relative;
|
||||
margin: 10px 0;
|
||||
|
||||
@ -5,11 +5,11 @@
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Custom Filter Widget Functions</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link class="ui-theme" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/cupertino/jquery-ui.css">
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7/jquery-ui.min.js"></script>
|
||||
<link class="ui-theme" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/cupertino/jquery-ui.css">
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/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>
|
||||
@ -23,11 +23,6 @@
|
||||
<script>
|
||||
$(function(){
|
||||
|
||||
$('.accordion').accordion({
|
||||
autoHeight: false,
|
||||
collapsible : true
|
||||
});
|
||||
|
||||
// External search
|
||||
// buttons set up like this:
|
||||
// <button type="button" class="search" data-filter-column="4" data-filter-text="2?%">Saved Search</button>
|
||||
@ -86,6 +81,9 @@
|
||||
// jQuery selector string of an element used to reset the filters
|
||||
filter_reset : '.reset',
|
||||
|
||||
// Use the $.tablesorter.storage utility to save the most recent filters
|
||||
filter_saveFilters : true,
|
||||
|
||||
// Delay in milliseconds before the filter widget starts searching; This option prevents searching for
|
||||
// every character while typing and should make searching large tables faster.
|
||||
filter_searchDelay : 300,
|
||||
@ -160,6 +158,7 @@
|
||||
<h3><a href="#">Notes</a></h3>
|
||||
<div>
|
||||
<ul>
|
||||
<li>In <span class="version">v2.14</span>, the <code>filter_saveFilters</code> option was added (default set to <code>false</code>); this demo has it set to <code>true</code> to provide an example.</li>
|
||||
<li>In <span class="version">v2.11</span>, the filter functions provide an additional parameter <code>$r</code> providing a jQuery object of the current row being searched by the filter.</li>
|
||||
<li>For <span class="version">v2.10.8</span>, the Age column includes the new <code>data-value</code> set to <code><30</code> which sets the default (starting) filter value (see <a href="index.html#widget-filter-defaultattrib">filter_defaultAttrib</a> for more details).</li>
|
||||
<li>As of tablesorter <span class="version">v2.9</span>, this widget can no longer be applied to versions of tablesorter prior to version 2.8.</li>
|
||||
|
||||
@ -8,8 +8,8 @@
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link class="ui-theme" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/cupertino/jquery-ui.css">
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7/jquery-ui.min.js"></script>
|
||||
<link class="ui-theme" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/cupertino/jquery-ui.css">
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/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>
|
||||
@ -26,9 +26,12 @@
|
||||
theme: 'blue',
|
||||
widgets: ["zebra", "filter"],
|
||||
widgetOptions : {
|
||||
// if true overrides default find rows behaviours and if any column matches query it returns that row
|
||||
// filter_anyMatch : true,
|
||||
// use the filter_external option OR use bindSearch function (below)
|
||||
// to bind external filters.
|
||||
// filter_external : '.search',
|
||||
|
||||
filter_columnFilters: false,
|
||||
filter_saveFilters : true,
|
||||
filter_reset: '.reset'
|
||||
}
|
||||
});
|
||||
@ -48,6 +51,14 @@
|
||||
});
|
||||
*/
|
||||
|
||||
// Allow changing an input from one column (any column) to another
|
||||
$('select').change(function(){
|
||||
// modify the search input data-column value (swap "0" or "all in this demo)
|
||||
$('.selectable').attr( 'data-column', $(this).val() );
|
||||
// update external search inputs
|
||||
$.tablesorter.filter.bindSearch( $table, $('.search'), false );
|
||||
});
|
||||
|
||||
});</script>
|
||||
|
||||
</head>
|
||||
@ -60,29 +71,52 @@
|
||||
</div>
|
||||
<div id="main">
|
||||
|
||||
<p class="tip">
|
||||
<em>NOTE!</em>
|
||||
<p></p>
|
||||
<br>
|
||||
<div class="accordion">
|
||||
|
||||
<h3><a href="#">Notes</a></h3>
|
||||
<div>
|
||||
<ul>
|
||||
<li>This demo shows how to use multiple external search filters to filter the table.</li>
|
||||
<li>The <code>$.tablesorter.filter.bindSearch()</code> function now allows binding multiple external search filters (<span class="version updated">v2.14</span>):
|
||||
<li>As of <span class="version">v2.15</span>,
|
||||
<ul>
|
||||
<li>A new filter widget <a href="index.html#widget-filter-external"><code>filter_external</code> option</a> has been added that essentially does the same thing as the <a href="index.html#function-bindsearch"><code>$.tablesorter.bindSearch</code></a> function.</li>
|
||||
</li>Use either to bind external search inputs.</li>
|
||||
<li>To change an input from searching one column (or all columns) to search any other column, call the <code>$.tablesorter.bindSearch</code> function to update the external inputs, even if the inputs are set using the <code>filter_external</code> option. Pass an additional <code>false</code> flag as the last parameter to force the inputs to update.
|
||||
<pre class="prettyprint lang-js">$.tablesorter.bindSearch( $('table'), $('.search'), false );</pre>
|
||||
</li>
|
||||
<li>This demo shows how to use multiple external search filters to filter the table, and how to make one input dynamically change to filter any or all columns.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>The <code>$.tablesorter.filter.bindSearch</code> function allows binding multiple external search filters</li>
|
||||
<li>The advantage of using this function over your own is:
|
||||
<ul>
|
||||
<li>Inputs behave the same as internal filters; searches adhere to the <code>filter_liveSearch</code> and <code>filter_searchDelay</code> options.</li>
|
||||
<li>When pressing the <kbd>Esc</kbd> key, the filter resets.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Include a <code>data-column="#"</code> attribute to specify to which column the search should apply.</li>
|
||||
<li>Include a <code>data-column="#"</code> attribute to specify to which column the search should apply; or <code>data-column="all"</code> to search all columns.</li>
|
||||
</ul>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1>Demo</h1>
|
||||
|
||||
<div id="demo">
|
||||
<input class="search" type="search" placeholder="first name" data-column="1">
|
||||
<input class="search" type="search" placeholder="last name" data-column="2">
|
||||
<button type="button" class="reset">Reset Search</button> <!-- targeted by the "filter_reset" option -->
|
||||
<div id="demo"><input class="search selectable" type="search" placeholder="Search" data-column="all">
|
||||
<!-- select to change data-column attribute of the above input -->
|
||||
<select class="change-input">
|
||||
<option value="all">all</option>
|
||||
<option value="0">Rank</option>
|
||||
<option value="1">First Name</option>
|
||||
<option value="2">Last Name</option>
|
||||
</select>
|
||||
<br>
|
||||
<input class="search" type="search" placeholder="First Name" data-column="1"><br>
|
||||
<input class="search" type="search" placeholder="Last Name" data-column="2"><br>
|
||||
<!-- targeted by the "filter_reset" option -->
|
||||
<button type="button" class="reset">Reset Search</button>
|
||||
|
||||
<table class="tablesorter">
|
||||
<table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Rank</th>
|
||||
|
||||
@ -5,10 +5,10 @@
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Custom Filter Widget Formatter (jQuery UI widgets)</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/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>
|
||||
@ -29,7 +29,7 @@
|
||||
<script src="js/jquery.jui_theme_switch.min.js"></script>
|
||||
|
||||
<!-- Tablesorter: required; also include any of the jQuery UI themes -->
|
||||
<link id="ui-theme" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/cupertino/jquery-ui.css">
|
||||
<link id="ui-theme" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/cupertino/jquery-ui.css">
|
||||
<link href="../css/theme.jui.css" rel="stylesheet">
|
||||
<link href="../css/filter.formatter.css" rel="stylesheet">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
@ -37,10 +37,6 @@
|
||||
<script src="../js/jquery.tablesorter.widgets-filter-formatter.js"></script>
|
||||
<script>
|
||||
$(function(){
|
||||
$('.accordion').accordion({
|
||||
heightStyle: 'content',
|
||||
collapsible : true
|
||||
});
|
||||
|
||||
$('#switcher').jui_theme_switch({
|
||||
stylesheet_link_id : 'ui-theme',
|
||||
@ -470,8 +466,8 @@
|
||||
<h1>Page Header</h1>
|
||||
<div>
|
||||
<pre class="prettyprint lang-html"><!-- jQuery UI for range slider -->
|
||||
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/themes/cupertino/jquery-ui.css">
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
|
||||
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/cupertino/jquery-ui.css">
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
|
||||
|
||||
<!-- tablesorter plugin -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
|
||||
@ -5,11 +5,11 @@
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Custom Filter Widget Formatter (HTML5 Elements)</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link class="ui-theme" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/themes/cupertino/jquery-ui.css">
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
|
||||
<link class="ui-theme" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/cupertino/jquery-ui.css">
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/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>
|
||||
@ -21,14 +21,7 @@
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
<script src="../js/jquery.tablesorter.widgets.js"></script>
|
||||
<script src="../js/jquery.tablesorter.widgets-filter-formatter.js"></script>
|
||||
<script>
|
||||
$(function(){
|
||||
$('.accordion').accordion({
|
||||
heightStyle: 'content',
|
||||
collapsible : true
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<script id="js">$(function() {
|
||||
|
||||
$("table").tablesorter({
|
||||
@ -263,8 +256,8 @@
|
||||
<h1>Page Header</h1>
|
||||
<div>
|
||||
<pre class="prettyprint lang-html"><!-- jQuery UI for range slider -->
|
||||
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/themes/cupertino/jquery-ui.css">
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
|
||||
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/cupertino/jquery-ui.css">
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
|
||||
|
||||
<!-- tablesorter plugin -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
|
||||
@ -344,11 +344,10 @@ $(".search").bind('search keyup', function (e) {
|
||||
<button type="button" class="toggle ffm">Toggle</button> filter-match (if class name added to the "First Name" column, all "or" searches will only match the content; Search <button data-filter-column="1">alex|br*|c</button> in the First Name column (<span class="version">2.10.1</span>).
|
||||
<hr>
|
||||
|
||||
<div id="demo">
|
||||
Search <button type="button" data-filter-column="5" data-filter-text="2?%">2?%</button> in the Discount column<br>
|
||||
<button type="button" class="reset">Reset</button> <!-- targeted by the "filter_reset" option -->
|
||||
<div id="demo">Search <button type="button" data-filter-column="5" data-filter-text="2?%">2?%</button> in the Discount column<br>
|
||||
<button type="button" class="reset">Reset</button> <!-- targeted by the "filter_reset" option -->
|
||||
|
||||
<table class="tablesorter">
|
||||
<table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<!-- you can also add a placeholder using script; $('.tablesorter th:eq(0)').data('placeholder', 'hello') -->
|
||||
@ -396,7 +395,8 @@ $(".search").bind('search keyup', function (e) {
|
||||
|
||||
<h1>CSS</h1>
|
||||
<div>
|
||||
<pre class="prettyprint lang-css">/* filter row */
|
||||
<pre class="prettyprint lang-css">/* This css is already contained within each theme file */
|
||||
/* filter row */
|
||||
.tablesorter-filter-row td {
|
||||
background: #eee;
|
||||
line-height: normal;
|
||||
|
||||
@ -8,71 +8,69 @@
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link class="ui-theme" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/themes/cupertino/jquery-ui.css">
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
|
||||
<link class="ui-theme" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/cupertino/jquery-ui.css">
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/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>
|
||||
|
||||
<style id="css">
|
||||
/* extra css needed because there are 5 child rows */
|
||||
/* no zebra striping */
|
||||
.tablesorter-blue tbody > tr:hover + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow > td,
|
||||
.tablesorter-blue tbody > tr:hover + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow > td,
|
||||
.tablesorter-blue tbody > tr:hover + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow > td,
|
||||
/* with zebra striping */
|
||||
.tablesorter-blue tbody > tr.even:hover + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow > td
|
||||
.tablesorter-blue tbody > tr.even:hover + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow > td
|
||||
.tablesorter-blue tbody > tr.even:hover + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow > td,
|
||||
.tablesorter-blue tbody > tr.even:hover + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow > td {
|
||||
background: #d9d9d9;
|
||||
}
|
||||
.tablesorter-blue tbody > tr.odd:hover + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow > td,
|
||||
.tablesorter-blue tbody > tr.odd:hover + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow > td,
|
||||
.tablesorter-blue tbody > tr.odd:hover + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow > td {
|
||||
background: #bfbfbf;
|
||||
}
|
||||
<style id="css">/* extra css needed because there are 5 child rows */
|
||||
/* no zebra striping */
|
||||
.tablesorter-blue tbody > tr:hover + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow > td,
|
||||
.tablesorter-blue tbody > tr:hover + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow > td,
|
||||
.tablesorter-blue tbody > tr:hover + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow > td,
|
||||
/* with zebra striping */
|
||||
.tablesorter-blue tbody > tr.even:hover + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow > td
|
||||
.tablesorter-blue tbody > tr.even:hover + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow > td
|
||||
.tablesorter-blue tbody > tr.even:hover + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow > td,
|
||||
.tablesorter-blue tbody > tr.even:hover + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow > td {
|
||||
background: #d9d9d9;
|
||||
}
|
||||
.tablesorter-blue tbody > tr.odd:hover + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow > td,
|
||||
.tablesorter-blue tbody > tr.odd:hover + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow > td,
|
||||
.tablesorter-blue tbody > tr.odd:hover + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow > td {
|
||||
background: #bfbfbf;
|
||||
}
|
||||
|
||||
/* Grouping widget css */
|
||||
tr.group-header td {
|
||||
background: #eee;
|
||||
}
|
||||
.group-name {
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
}
|
||||
.group-count {
|
||||
color: #999;
|
||||
}
|
||||
.group-hidden {
|
||||
display: none !important;
|
||||
}
|
||||
.group-header, .group-header td {
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
}
|
||||
/* collapsed arrow */
|
||||
tr.group-header td i {
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 4px solid transparent;
|
||||
border-bottom: 4px solid #888;
|
||||
border-right: 4px solid #888;
|
||||
border-left: 4px solid transparent;
|
||||
margin-right: 7px;
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
}
|
||||
tr.group-header.collapsed td i {
|
||||
border-top: 5px solid transparent;
|
||||
border-bottom: 5px solid transparent;
|
||||
border-left: 5px solid #888;
|
||||
border-right: 0;
|
||||
margin-right: 10px;
|
||||
}
|
||||
</style>
|
||||
/* Grouping widget css */
|
||||
tr.group-header td {
|
||||
background: #eee;
|
||||
}
|
||||
.group-name {
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
}
|
||||
.group-count {
|
||||
color: #999;
|
||||
}
|
||||
.group-hidden {
|
||||
display: none !important;
|
||||
}
|
||||
.group-header, .group-header td {
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
}
|
||||
/* collapsed arrow */
|
||||
tr.group-header td i {
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 4px solid transparent;
|
||||
border-bottom: 4px solid #888;
|
||||
border-right: 4px solid #888;
|
||||
border-left: 4px solid transparent;
|
||||
margin-right: 7px;
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
}
|
||||
tr.group-header.collapsed td i {
|
||||
border-top: 5px solid transparent;
|
||||
border-bottom: 5px solid transparent;
|
||||
border-left: 5px solid #888;
|
||||
border-right: 0;
|
||||
margin-right: 10px;
|
||||
}</style>
|
||||
|
||||
<!-- Tablesorter: required -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
@ -83,15 +81,6 @@
|
||||
<script src="../js/parsers/parser-input-select.js"></script>
|
||||
<script src="../js/widgets/widget-grouping.js"></script>
|
||||
|
||||
<script>
|
||||
$(function(){
|
||||
$('.accordion').accordion({
|
||||
heightStyle: 'content',
|
||||
collapsible : true
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<script id="js">$(function(){
|
||||
|
||||
$("table").tablesorter({
|
||||
|
||||
@ -8,50 +8,50 @@
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link class="ui-theme" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/themes/cupertino/jquery-ui.css">
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
|
||||
<link class="ui-theme" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/cupertino/jquery-ui.css">
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/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>
|
||||
|
||||
<style id="css">tr.group-header td {
|
||||
background: #eee;
|
||||
}
|
||||
.group-name {
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
}
|
||||
.group-count {
|
||||
color: #999;
|
||||
}
|
||||
.group-hidden {
|
||||
display: none;
|
||||
}
|
||||
.group-header, .group-header td {
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
}
|
||||
/* collapsed arrow */
|
||||
tr.group-header td i {
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 4px solid transparent;
|
||||
border-bottom: 4px solid #888;
|
||||
border-right: 4px solid #888;
|
||||
border-left: 4px solid transparent;
|
||||
margin-right: 7px;
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
}
|
||||
tr.group-header.collapsed td i {
|
||||
border-top: 5px solid transparent;
|
||||
border-bottom: 5px solid transparent;
|
||||
border-left: 5px solid #888;
|
||||
border-right: 0;
|
||||
margin-right: 10px;
|
||||
}</style>
|
||||
background: #eee;
|
||||
}
|
||||
.group-name {
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
}
|
||||
.group-count {
|
||||
color: #999;
|
||||
}
|
||||
.group-hidden {
|
||||
display: none;
|
||||
}
|
||||
.group-header, .group-header td {
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
}
|
||||
/* collapsed arrow */
|
||||
tr.group-header td i {
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 4px solid transparent;
|
||||
border-bottom: 4px solid #888;
|
||||
border-right: 4px solid #888;
|
||||
border-left: 4px solid transparent;
|
||||
margin-right: 7px;
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
}
|
||||
tr.group-header.collapsed td i {
|
||||
border-top: 5px solid transparent;
|
||||
border-bottom: 5px solid transparent;
|
||||
border-left: 5px solid #888;
|
||||
border-right: 0;
|
||||
margin-right: 10px;
|
||||
}</style>
|
||||
|
||||
<!-- Tablesorter: required -->
|
||||
<link href="../css/theme.blue.css" rel="stylesheet">
|
||||
@ -62,15 +62,6 @@
|
||||
<script src="../js/parsers/parser-input-select.js"></script>
|
||||
<script src="../js/widgets/widget-grouping.js"></script>
|
||||
|
||||
<script>
|
||||
$(function(){
|
||||
$('.accordion').accordion({
|
||||
heightStyle: 'content',
|
||||
collapsible : true
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<script id="js">$(function(){
|
||||
|
||||
$("table").tablesorter({
|
||||
|
||||
@ -36,12 +36,15 @@
|
||||
var h = '', i, $tr, l, skip;
|
||||
// cache and collect all TH headers
|
||||
if (!wo.repeatHeaders) {
|
||||
h = '<tr class="repeated-header remove-me">';
|
||||
$.each(c.headerContent, function(i,t) {
|
||||
h += '<th>' + t + '</th>';
|
||||
});
|
||||
// "remove-me" class was added in case the table needs to be updated, the "remove-me" rows will be
|
||||
// removed prior to the update to prevent including the rows in the update - see "selectorRemove" option
|
||||
h = '<tr class="repeated-header remove-me">';
|
||||
$.each(c.headerContent, function(i,t) {
|
||||
// table.config.headerContent stores the original table HTML (as text), but it is the HTML before
|
||||
// the headerTemplate option is applied to each header cell; and before the `onRender` callbacks are
|
||||
// executed
|
||||
h += '<th>' + t + '</th>';
|
||||
});
|
||||
wo.repeatHeaders = h + '</tr>';
|
||||
}
|
||||
|
||||
@ -71,7 +74,10 @@
|
||||
theme: 'blue',
|
||||
|
||||
// apply both widgets
|
||||
widgets: ['zebra', 'repeatHeaders']
|
||||
widgets: ['zebra', 'repeatHeaders'],
|
||||
widgetOptions : {
|
||||
rowsToSkip : 4
|
||||
}
|
||||
});
|
||||
|
||||
});</script>
|
||||
@ -90,44 +96,52 @@
|
||||
<div class="tip">
|
||||
Notes about the <code>addWidget</code> template:
|
||||
<ul>
|
||||
<li>The <code>id</code> block is required and must be unique.</li>
|
||||
<li>The <code>priority</code> block is optional (<span class="version">v2.9</span>):
|
||||
<li>The <code>id</code> block:
|
||||
<ul>
|
||||
<li>The widget id, or name, must be unique!</li>
|
||||
<li>The id, or name, can contain special characters and/or spaces.</li>
|
||||
<li>This setting is required.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>The <code>priority</code> block (added <span class="version">v2.9</span>):
|
||||
<ul>
|
||||
<li>Set the widget priority using any number; think of it like setting the css z-index.</li>
|
||||
<li>This tells the plugin the order in which to run the widgets, lowest number priority first.</li>
|
||||
<li>The default widgets have priorities set in intervals of 10 (see the <a href="index.html#Widget-options"> widget priority table</a>), so to run your custom widget before a specific widget, set your widget priority to less than that number.</li>
|
||||
<li>If no priority is specified, it defaults to <code>10</code>.</li>
|
||||
<li>This block is <strong>not supported in older versions</strong>!</li>
|
||||
<li>This setting is optional, but if no priority is specified, it defaults to <code>10</code>.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>The <code>options</code> block (<span class="version">v2.8</span>):
|
||||
<li>The <code>options</code> block (added <span class="version">v2.8</span>):
|
||||
<ul>
|
||||
<li>Include any widget options to be automatically be extended with any set widgetOptions (from <code>table.config.widgetOptions</code>).</li>
|
||||
<li>This block was added in tablesorter v2.8 and is not supported in older versions!</li>
|
||||
<li>As of v2.8, no included widgets will be using this to maintain backwards compatibility with older versions. This changed when v2.9 was released.</li>
|
||||
<li>This block is <strong>not supported in older versions</strong>!</li>
|
||||
<li>This block is optional.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>The <code>init</code> block:
|
||||
<li>The <code>init</code> block (added v2.0.28):
|
||||
<ul>
|
||||
<li>This code is called only after tablesorter has initialized, but before initial sort and before any of the widgets are applied; it is only run once.</li>
|
||||
<li>This block was added in v2.0.28 and it not supported in older versions.</li>
|
||||
<li>Since, v2.0.28, only the saveSort widget uses this block to ensure that the stored sort is applied before .</li>
|
||||
<li>This code is called only after tablesorter has initialized, but before initial sort and before <strong>any</strong> of the widgets are applied (via the <code>format</code> block); it is only run once.</li>
|
||||
<li>Since, v2.0.28, only the saveSort widget uses this block to ensure that the stored sort is applied before; but some of the newer widgets (post v2.9) are using this code block.</li>
|
||||
<li>This block is <strong>not supported in older versions</strong>.</li>
|
||||
<li>This block is optional.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>The <code>format</code> block:
|
||||
<li>The <code>format</code> block (modified v2.0.23):
|
||||
<ul>
|
||||
<li>This block is part of the original <code>addWidget</code> template and is required.</li>
|
||||
<li>In the original template, only the <code>table</code> parameter is provided. After v2.0.28, <code>config</code> and <code>widgetOptions</code> were provided as additional parameters (sorry the previous docs were incorrect).</li>
|
||||
<li>The <code>initFlag</code> is correctly set in v2.8+.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>The <code>remove</code> block:
|
||||
<li>The <code>remove</code> block (added v2.4):
|
||||
<ul>
|
||||
<li>This code is called when either the <a href="index.html#refreshwidgets"><code>refreshWidgets</code></a> or <a href="index.html#destroy"><code>destroy</code></a> methods are called.</li>
|
||||
<li>The code contained within this block must remove all additional content/elements added by the widget. Also, any rows or content that is hidden must be restored.</li>
|
||||
<li>If additional rows are added to the table, make sure to include the class name within the <a href="index.html#selectorremove"><code>selectorRemove</code></a> option.</li>
|
||||
<li>This block was added in v2.4 and is optional.</li>
|
||||
<li>This block was added in v2.4, and <strong>not supported in older versions</strong>.</li>
|
||||
<li>This block is optional.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
@ -160,7 +174,7 @@ $.tablesorter.addWidget({
|
||||
},
|
||||
format: function(table, config, widgetOptions, initFlag) {
|
||||
// widget code to apply to the table *AFTER EACH SORT*
|
||||
// the initFlag is true when this format is called from the init
|
||||
// set the initFlag to true when this format is called from the init
|
||||
// function above otherwise initFlag is undefined
|
||||
// * see the saveSort widget for a full example *
|
||||
},
|
||||
|
||||
BIN
docs/img/link.png
Normal file
BIN
docs/img/link.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 704 B |
1664
docs/index.html
1664
docs/index.html
File diff suppressed because it is too large
Load Diff
@ -1,8 +1,4 @@
|
||||
$(function(){
|
||||
$('.accordion').accordion({
|
||||
heightStyle: 'content',
|
||||
collapsible : true
|
||||
});
|
||||
|
||||
// ***************************
|
||||
// ARRAY
|
||||
|
||||
@ -59,6 +59,7 @@ $(function(){
|
||||
$('.permalink').dblclick(function(){
|
||||
clicked = true;
|
||||
window.location.hash = '#' + $(this).closest('tr')[0].id;
|
||||
showProperty();
|
||||
setTimeout(function(){ clicked = false; }, 500);
|
||||
return false;
|
||||
});
|
||||
@ -89,10 +90,39 @@ $(function(){
|
||||
}
|
||||
});
|
||||
|
||||
$t = $('.accordion');
|
||||
if ($t.length) {
|
||||
var hashId = 0;
|
||||
if (window.location.hash) {
|
||||
$t.children('h3').each(function(i){
|
||||
var txt = $(this).text().toLowerCase().replace(/\s+/g,'_');
|
||||
this.id = txt;
|
||||
if (txt === window.location.hash.slice(1)) {
|
||||
hashId = i;
|
||||
}
|
||||
});
|
||||
}
|
||||
$t.accordion({
|
||||
active: hashId,
|
||||
animate: false,
|
||||
heightStyle: 'content',
|
||||
collapsible: true,
|
||||
create: function( event, ui ) {
|
||||
$t.children('h3').each(function(i){
|
||||
this.id = $(this).text().toLowerCase().replace(/\s+/g,'_')
|
||||
$(this).before('<a class="accordion-link link" data-index="' + i + '" href="#' + this.id + '"></a>');
|
||||
});
|
||||
$t.find('.accordion-link').click(function(){
|
||||
$t.accordion( "option", "active", $(this).data('index') );
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
function showProperty(){
|
||||
var prop, h = window.location.hash;
|
||||
var prop, $t, h = window.location.hash;
|
||||
if (h) {
|
||||
prop = $(h);
|
||||
if (prop.length && prop[0].tagName !== "TABLE") {
|
||||
@ -102,8 +132,10 @@ function showProperty(){
|
||||
}
|
||||
// move below sticky header; added delay as there could be some lag
|
||||
setTimeout(function(){
|
||||
if (/options/.test(prop.closest('table').attr('id') || '')) {
|
||||
$('body').scrollTop( prop.position().top - 28 );
|
||||
$t = prop.closest('table');
|
||||
h = $t[0].config.widgetOptions.$sticky.height() || 27;
|
||||
if ($t.hasClass('options') || $t.hasClass('api')) {
|
||||
$('body').scrollTop( prop.position().top - h );
|
||||
}
|
||||
}, 200);
|
||||
}
|
||||
@ -111,14 +143,12 @@ function showProperty(){
|
||||
}
|
||||
|
||||
$(window).load(function(){
|
||||
|
||||
if ($('#root').length) {
|
||||
$(window).bind('hashchange', function(){
|
||||
showProperty();
|
||||
});
|
||||
showProperty();
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
// append hidden parsed value to cell
|
||||
|
||||
191
js/extras/jquery.quicksearch.js
Normal file
191
js/extras/jquery.quicksearch.js
Normal file
@ -0,0 +1,191 @@
|
||||
/* jQuery Quicksearch plugin
|
||||
by riklomas https://github.com/riklomas/quicksearch
|
||||
Modified to include childRows (for tablesorter)
|
||||
|
||||
See http://stackoverflow.com/q/20342203/145346 for
|
||||
more details
|
||||
*/
|
||||
(function($, window, document, undefined) {
|
||||
$.fn.quicksearch = function (target, opt) {
|
||||
|
||||
var timeout, cache, rowcache, jq_results, val = '', e = this, options = $.extend({
|
||||
delay: 100,
|
||||
selector: null,
|
||||
stripeRows: null,
|
||||
loader: null,
|
||||
noResults: '',
|
||||
childRow: 'tablesorter-childRow', // include child row with search results
|
||||
matchedResultsCount: 0,
|
||||
bind: 'keyup',
|
||||
onBefore: function () {
|
||||
return;
|
||||
},
|
||||
onAfter: function () {
|
||||
return;
|
||||
},
|
||||
show: function () {
|
||||
this.style.display = "";
|
||||
},
|
||||
hide: function () {
|
||||
this.style.display = "none";
|
||||
},
|
||||
prepareQuery: function (val) {
|
||||
return val.toLowerCase().split(' ');
|
||||
},
|
||||
testQuery: function (query, txt, _row) {
|
||||
for (var i = 0; i < query.length; i += 1) {
|
||||
if (txt.indexOf(query[i]) === -1) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
return true;
|
||||
}
|
||||
}, opt);
|
||||
|
||||
this.go = function () {
|
||||
|
||||
var i = 0,
|
||||
numMatchedRows = 0,
|
||||
noresults = true,
|
||||
query = options.prepareQuery(val),
|
||||
val_empty = (val.replace(' ', '').length === 0);
|
||||
|
||||
for (var i = 0, len = rowcache.length; i < len; i++) {
|
||||
if (val_empty || options.testQuery(query, cache[i], rowcache[i]) ||
|
||||
($(rowcache[i]).hasClass(options.childRow) && $(rowcache[i > 1 ? i - 1 : 0]).is(':visible'))) {
|
||||
options.show.apply(rowcache[i]);
|
||||
noresults = false;
|
||||
numMatchedRows++;
|
||||
} else {
|
||||
options.hide.apply(rowcache[i]);
|
||||
}
|
||||
}
|
||||
|
||||
if (noresults) {
|
||||
this.results(false);
|
||||
} else {
|
||||
this.results(true);
|
||||
this.stripe();
|
||||
}
|
||||
|
||||
this.matchedResultsCount = numMatchedRows;
|
||||
this.loader(false);
|
||||
options.onAfter();
|
||||
|
||||
return this;
|
||||
};
|
||||
|
||||
/*
|
||||
* External API so that users can perform search programatically.
|
||||
* */
|
||||
this.search = function (submittedVal) {
|
||||
val = submittedVal;
|
||||
e.trigger();
|
||||
};
|
||||
|
||||
/*
|
||||
* External API to get the number of matched results as seen in
|
||||
* https://github.com/ruiz107/quicksearch/commit/f78dc440b42d95ce9caed1d087174dd4359982d6
|
||||
* */
|
||||
this.currentMatchedResults = function() {
|
||||
return this.matchedResultsCount;
|
||||
};
|
||||
|
||||
this.stripe = function () {
|
||||
|
||||
if (typeof options.stripeRows === "object" && options.stripeRows !== null)
|
||||
{
|
||||
var joined = options.stripeRows.join(' ');
|
||||
var stripeRows_length = options.stripeRows.length;
|
||||
|
||||
jq_results.not(':hidden').each(function (i) {
|
||||
$(this).removeClass(joined).addClass(options.stripeRows[i % stripeRows_length]);
|
||||
});
|
||||
}
|
||||
|
||||
return this;
|
||||
};
|
||||
|
||||
this.strip_html = function (input) {
|
||||
var output = input.replace(new RegExp('<[^<]+\>', 'g'), "");
|
||||
output = $.trim(output.toLowerCase());
|
||||
return output;
|
||||
};
|
||||
|
||||
this.results = function (bool) {
|
||||
if (typeof options.noResults === "string" && options.noResults !== "") {
|
||||
if (bool) {
|
||||
$(options.noResults).hide();
|
||||
} else {
|
||||
$(options.noResults).show();
|
||||
}
|
||||
}
|
||||
return this;
|
||||
};
|
||||
|
||||
this.loader = function (bool) {
|
||||
if (typeof options.loader === "string" && options.loader !== "") {
|
||||
(bool) ? $(options.loader).show() : $(options.loader).hide();
|
||||
}
|
||||
return this;
|
||||
};
|
||||
|
||||
this.cache = function () {
|
||||
|
||||
jq_results = $(target);
|
||||
|
||||
if (typeof options.noResults === "string" && options.noResults !== "") {
|
||||
jq_results = jq_results.not(options.noResults);
|
||||
}
|
||||
|
||||
var t = (typeof options.selector === "string") ?
|
||||
jq_results.find(options.selector) : $(target).not(options.noResults);
|
||||
cache = t.map(function () {
|
||||
return e.strip_html(this.innerHTML);
|
||||
});
|
||||
|
||||
rowcache = jq_results.map(function () {
|
||||
return this;
|
||||
});
|
||||
|
||||
/*
|
||||
* Modified fix for sync-ing "val".
|
||||
* Original fix https://github.com/michaellwest/quicksearch/commit/4ace4008d079298a01f97f885ba8fa956a9703d1
|
||||
* */
|
||||
val = val || this.val() || "";
|
||||
|
||||
return this.go();
|
||||
};
|
||||
|
||||
this.trigger = function () {
|
||||
this.loader(true);
|
||||
options.onBefore();
|
||||
|
||||
window.clearTimeout(timeout);
|
||||
timeout = window.setTimeout(function () {
|
||||
e.go();
|
||||
}, options.delay);
|
||||
|
||||
return this;
|
||||
};
|
||||
|
||||
this.cache();
|
||||
this.results(true);
|
||||
this.stripe();
|
||||
this.loader(false);
|
||||
|
||||
return this.each(function () {
|
||||
|
||||
/*
|
||||
* Changed from .bind to .on.
|
||||
* */
|
||||
$(this).on(options.bind, function () {
|
||||
|
||||
val = $(this).val();
|
||||
e.trigger();
|
||||
});
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
}(jQuery, this, document));
|
||||
@ -630,7 +630,7 @@ ts.filter = {
|
||||
ts.filter.checkFilters(table, filters);
|
||||
});
|
||||
// filter widget initialized
|
||||
wo.filter_Initialized = true;
|
||||
wo.filter_initialized = true;
|
||||
c.$table.trigger('filterInit');
|
||||
},
|
||||
setDefaults: function(table, c, wo) {
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
/* Column Selector/Responsive table widget (beta) for TableSorter 12/17/2013 (v2.14.6)
|
||||
/* Column Selector/Responsive table widget (beta) for TableSorter 12/17/2013 (v2.15.0)
|
||||
* Requires tablesorter v2.8+ and jQuery 1.7+
|
||||
* by Justin Hallett & Rob Garrison
|
||||
*/
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
/*! tablesorter CSS Sticky Headers widget - updated 12/17/2013 (v2.14.6)
|
||||
/*! tablesorter CSS Sticky Headers widget - updated 12/17/2013 (v2.15.0)
|
||||
* Requires a modern browser, tablesorter v2.8+
|
||||
*/
|
||||
/*global jQuery: false, unused:false */
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
/*! tablesorter Editable Content widget - updated 11/25/2013 (core v2.14.2)
|
||||
/*! tablesorter Editable Content widget - updated 1/24/2014 (core v2.15.0)
|
||||
* Requires tablesorter v2.8+ and jQuery 1.7+
|
||||
* by Rob Garrison
|
||||
*/
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
/*! tablesorter Grouping widget - updated 12/18/2013 (core v2.14.6)
|
||||
/*! tablesorter Grouping widget - updated 12/18/2013 (core v2.15.0)
|
||||
* Requires tablesorter v2.8+ and jQuery 1.7+
|
||||
* by Rob Garrison
|
||||
*/
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
/* Pager widget (beta) for TableSorter 12/14/2013 (v2.14.4) */
|
||||
/* Pager widget (beta) for TableSorter 1/16/2014 (v2.15.0) */
|
||||
/*jshint browser:true, jquery:true, unused:false */
|
||||
;(function($){
|
||||
"use strict";
|
||||
|
||||
Loading…
Reference in New Issue
Block a user