mirror of
https://github.com/Mottie/tablesorter.git
synced 2025-01-12 15:24:21 +00:00
updated pager/filter docs with better examples & new changes
This commit is contained in:
Mottie
parent
a5abb5060a
commit
33db54c017
@ -188,16 +188,19 @@
|
||||
// process data
|
||||
if ( typeof(c.ajaxProcessing) === "function" ) {
|
||||
// ajaxProcessing result: [ total, rows, headers ]
|
||||
var i, j, hsh, $f, $sh,
|
||||
var i, j, hsh, $f, $sh, th, d, l,
|
||||
$t = $(table),
|
||||
tc = table.config,
|
||||
hl = $t.find('thead th').length, tds = '',
|
||||
err = '<tr class="' + c.cssErrorRow + ' ' + tc.selectorRemove.replace(/(tr)?\./g,'') + '"><td style="text-align: center;" colspan="' + hl + '">' +
|
||||
(exception ? exception.message + ' (' + exception.name + ')' : 'No rows found') + '</td></tr>',
|
||||
result = c.ajaxProcessing(data) || [ 0, [] ],
|
||||
d = result[1] || [],
|
||||
l = d.length,
|
||||
th = result[2];
|
||||
// allow [ total, rows, headers ] or [ rows, total, headers ]
|
||||
t = isNaN(result[0]) && !isNaN(result[1]);
|
||||
c.totalRows = result[t ? 1 : 0] || 0;
|
||||
d = result[t ? 0 : 1] || []; // row data
|
||||
l = d.length;
|
||||
th = result[2]; // headers
|
||||
if ( l > 0 ) {
|
||||
for ( i = 0; i < l; i++ ) {
|
||||
tds += '<tr>';
|
||||
@ -242,7 +245,6 @@
|
||||
$.tablesorter.isProcessing(table); // remove loading icon
|
||||
}
|
||||
$t.trigger('update');
|
||||
c.totalRows = result[0] || 0;
|
||||
c.totalPages = Math.ceil( c.totalRows / c.size );
|
||||
updatePageDisplay(table, c);
|
||||
fixHeight(table, c);
|
||||
@ -281,17 +283,17 @@
|
||||
.replace(/\{size\}/g, c.size) : '',
|
||||
sl = table.config.sortList,
|
||||
fl = c.currentFilters || [],
|
||||
sortCol = url.match(/\{sortList[\s+]?:[\s+]?([^}]*)\}/),
|
||||
filterCol = url.match(/\{filterList[\s+]?:[\s+]?([^}]*)\}/),
|
||||
sortCol = url.match(/\{\s*sort(?:List)?\s*:\s*(\w*)\s*\}/),
|
||||
filterCol = url.match(/\{\s*filter(?:List)?\s*:\s*(\w*)\s*\}/),
|
||||
arry = [];
|
||||
|
||||
if (sortCol) {
|
||||
sortCol = sortCol[1];
|
||||
$.each(sl, function(i,v){
|
||||
arry.push(sortCol + '[' + v[0] + ']=' + v[1]);
|
||||
});
|
||||
// if the arry is empty, just add the col parameter... "&{sortList:col}" becomes "&col"
|
||||
url = url.replace(/\{sortList[\s+]?:[\s+]?([^\}]*)\}/g, arry.length ? arry.join('&') : sortCol );
|
||||
url = url.replace(/\{\s*sort(?:List)?\s*:\s*(\w*)\s*\}/g, arry.length ? arry.join('&') : sortCol );
|
||||
arry = [];
|
||||
}
|
||||
if (filterCol) {
|
||||
filterCol = filterCol[1];
|
||||
@ -301,13 +303,11 @@
|
||||
}
|
||||
});
|
||||
// if the arry is empty, just add the fcol parameter... "&{filterList:fcol}" becomes "&fcol"
|
||||
url = url.replace(/\{filterList[\s+]?:[\s+]?([^\}]*)\}/g, arry.length ? arry.join('&') : filterCol );
|
||||
url = url.replace(/\{\s*filter(?:List)?\s*:\s*(\w*)\s*\}/g, arry.length ? arry.join('&') : filterCol );
|
||||
}
|
||||
|
||||
if ( typeof(c.customAjaxUrl) === "function" ) {
|
||||
url = c.customAjaxUrl(table, url);
|
||||
}
|
||||
|
||||
return url;
|
||||
},
|
||||
|
||||
@ -365,7 +365,7 @@
|
||||
});
|
||||
},
|
||||
|
||||
moveToPage = function(table, c) {
|
||||
moveToPage = function(table, c, flag) {
|
||||
if ( c.isDisabled ) { return; }
|
||||
var p = Math.min( c.totalPages, c.filteredPages );
|
||||
if ( c.page < 0 ) { c.page = 0; }
|
||||
@ -377,7 +377,9 @@
|
||||
}
|
||||
$.data(table, 'pagerLastPage', c.page);
|
||||
$.data(table, 'pagerUpdateTriggered', true);
|
||||
if (c.initialized) { $(table).trigger('pageMoved', c); }
|
||||
if (c.initialized && flag !== false) {
|
||||
$(table).trigger('pageMoved', c);
|
||||
}
|
||||
},
|
||||
|
||||
setPageSize = function(table, size, c) {
|
||||
@ -474,8 +476,7 @@
|
||||
$.data(table, 'pagerUpdateTriggered', false);
|
||||
return;
|
||||
}
|
||||
if (e.type === 'filterEnd') { c.page = 0; }
|
||||
moveToPage(table, c);
|
||||
moveToPage(table, c, false);
|
||||
updatePageDisplay(table, c);
|
||||
fixHeight(table, c);
|
||||
})
|
||||
@ -588,4 +589,4 @@ $.fn.extend({
|
||||
tablesorterPager: $.tablesorterPager.construct
|
||||
});
|
||||
|
||||
})(jQuery);
|
||||
})(jQuery);
|
||||
@ -1,7 +1,7 @@
|
||||
{
|
||||
"total_rows": "80",
|
||||
"total_rows": 80,
|
||||
|
||||
"cols" : [
|
||||
"headers" : [
|
||||
"ID", "Name", "Country Code", "District", "Population"
|
||||
],
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
{
|
||||
"total_rows": "80",
|
||||
"total_rows": 80,
|
||||
|
||||
"cols" : [
|
||||
"headers" : [
|
||||
"ID", "Name", "Country Code", "District", "Population"
|
||||
],
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
{
|
||||
"total_rows": "80",
|
||||
"total_rows": 80,
|
||||
|
||||
"cols" : [
|
||||
"headers" : [
|
||||
"ID", "Name", "Country Code", "District", "Population"
|
||||
],
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
{
|
||||
"total_rows": "80",
|
||||
"total_rows": 80,
|
||||
|
||||
"cols" : [
|
||||
"headers" : [
|
||||
"ID", "Name", "Country Code", "District", "Population"
|
||||
],
|
||||
|
||||
|
||||
@ -47,7 +47,7 @@ div#main h1 {border-bottom:1px solid #CDCDCD;display:block;margin-top:20px;paddi
|
||||
table#tablesorter-demo {margin: 10px 0 0 0;}
|
||||
table *, p.small {font-size:small;}
|
||||
p.small {padding-left: 25px;}
|
||||
p.tip em {padding: 2px; background-color: #6cf; color: #fff;}
|
||||
p.tip em, div.tip em {padding: 2px; background-color: #6cf; color: #fff;}
|
||||
span.tip em {padding: 0 2px;background-color: #00ce53; color: #fff; font-size:90%; }
|
||||
div.digg {float: right;}
|
||||
.next-up { padding-top: 10px; font-size: 90%; }
|
||||
|
||||
@ -33,7 +33,7 @@
|
||||
theme: 'blue',
|
||||
widthFixed: true,
|
||||
sortLocaleCompare: true, // needed for accented characters in the data
|
||||
widgets: ['zebra']
|
||||
widgets: ['zebra', 'filter']
|
||||
})
|
||||
|
||||
// initialize the pager plugin
|
||||
@ -54,15 +54,16 @@
|
||||
// the filterList to the url into an "fcol" array.
|
||||
// So a sortList = [[2,0],[3,0]] becomes "&col[2]=0&col[3]=0" in the url
|
||||
// and a filterList = [[2,Blue],[3,13]] becomes "&fcol[2]=Blue&fcol[3]=13" in the url
|
||||
ajaxUrl : 'assets/City{page}.json',
|
||||
ajaxUrl : 'assets/City{page}.json#{filterList:filter}&{sortList:column}',
|
||||
|
||||
// modify the url after all processing has been applied
|
||||
customAjaxUrl: function(table, url) {
|
||||
// manipulate the url string as you desire
|
||||
// url += '&cPage=' + window.location.pathname;
|
||||
// trigger my custom event
|
||||
$(table).trigger('changingUrl');
|
||||
// send the server the current page; separated & and "curr"
|
||||
// because the browser things we're typing to use &curr;
|
||||
return url += '&currntUrl=' + window.location.href;
|
||||
$(table).trigger('changingUrl', url);
|
||||
// send the server the current page
|
||||
return url;
|
||||
},
|
||||
|
||||
// process ajax so that the following information is returned:
|
||||
@ -84,7 +85,7 @@
|
||||
// total number of rows (required)
|
||||
total = data.total_rows,
|
||||
// array of header names (optional)
|
||||
headers = data.cols,
|
||||
headers = data.headers,
|
||||
// all rows: array of arrays; each internal array has the table cell data for that row
|
||||
rows = [],
|
||||
// len should match pager set size (c.size)
|
||||
@ -140,13 +141,7 @@
|
||||
});
|
||||
|
||||
});</script>
|
||||
<script>
|
||||
$(window).load(function(){
|
||||
// allow THIS demo to sort the content; this variable is automatically set to true when ajax
|
||||
// is used as there isn't any way to sort the server side data from the client side.
|
||||
$('table')[0].config.serverSideSorting = false;
|
||||
});
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body id="pager-demo">
|
||||
<div id="banner">
|
||||
@ -158,7 +153,7 @@
|
||||
|
||||
<div id="main">
|
||||
|
||||
<p class="tip">
|
||||
<div class="tip">
|
||||
<em>NOTE!</em>:
|
||||
<ul>
|
||||
<li><code>{filterList:fcol}</code> was added to the <code>ajaxUrl</code> in version 2.6.</li>
|
||||
@ -166,33 +161,65 @@
|
||||
<li>This update to the pager plugin that interacts with a database via ajax was added in version 2.0.32 and can be applied to the original tablesorter.</li>
|
||||
<li>The <code>ajaxUrl</code> and <code>ajaxProcessing</code> function are both required options for this interaction to work properly.</li>
|
||||
<li>The <code>ajaxUrl</code> contains a replaceable string to sent the requested page (<code>{page}</code>), block size (<code>{size}</code>) or sort order (<code>{sortList:name}</code>).</li>
|
||||
<li>The <code>ajaxProcessing</code> function must* return the data in the following format <code>[ total, rows, headers ]</code> - <span class="tip"><em>Modified</em></span> in 2.1.3:
|
||||
<li>The <code>ajaxProcessing</code> function is needed to convert your custom JSON format into an array usable by the pager plugin (modified in 2.1.3)<br>
|
||||
<br>
|
||||
So, given this custom JSON format (this is only an example):
|
||||
<pre class="prettyprint lang-javascript">{
|
||||
"total_rows": 80,
|
||||
|
||||
"headers" : [
|
||||
"ID", "Name", "Country Code", "District", "Population"
|
||||
],
|
||||
|
||||
"rows" : [{
|
||||
"ID": 1,
|
||||
"Name": "Kabul",
|
||||
"CountryCode": "AFG",
|
||||
"District": "Kabol",
|
||||
"Population": 1780000
|
||||
}, {
|
||||
"ID": 2,
|
||||
"Name": "Qandahar",
|
||||
"CountryCode": "AFG",
|
||||
"District": "Qandahar",
|
||||
"Population": 237500
|
||||
}, {
|
||||
...
|
||||
}, {
|
||||
"ID": 25,
|
||||
"Name": "Haarlemmermeer",
|
||||
"CountryCode": "NLD",
|
||||
"District": "Noord-Holland",
|
||||
"Population": 110722
|
||||
}]
|
||||
}</pre>The <code>ajaxProcessing</code> function must* return the data in the following format <code>[ total, rows, headers (optional) ]</code>, or in version 2.9+ <code>[ rows, total, headers (optional) ]</code>:
|
||||
<pre class="prettyprint lang-javascript">[
|
||||
// total # rows contained in the database
|
||||
100,
|
||||
80,
|
||||
// row data: array of arrays; each internal array has the table cell data for that row
|
||||
[
|
||||
[ "row1cell1", "row1cell2", ... "row1cellN" ], // first row
|
||||
[ "row2cell1", "row2cell2", ... "row2cellN" ], // second row
|
||||
[ 1, "Kabul", "AFG", "Kabol", 1780000 ], // [ "row1cell1", "row1cell2", ... "row1cellN" ],
|
||||
[ 2, "Qandahar", "AFG", "Qandahar", 237500 ], // [ "row2cell1", "row2cell2", ... "row2cellN" ],
|
||||
...
|
||||
[ "rowNcell1", "rowNcell2", ... "rowNcellN" ] // last row
|
||||
[ 25, "Haarlemmermeer", "NLD", "Noord-Holland", 110722 ] // [ "rowNcell1", "rowNcell2", ... "rowNcellN" ]
|
||||
],
|
||||
// header text (optional)
|
||||
[ "Header1", "Header2", ... "HeaderN" ]
|
||||
[ "ID", "Name", "Country Code", "District", "Population" ] // [ "Header1", "Header2", ... "HeaderN" ] (optional)
|
||||
]</pre></li>
|
||||
<li>The table header and footer text will be updated to match the JSON "header column #" text; but there is an issue with the table rendering improperly if the number of columns in the HTML and the number of columns in the JSON don't match.</li>
|
||||
<li>Limitations of this demo:
|
||||
<ul>
|
||||
<li>This demo will not work in Chrome due to restrictions with browser and desktop interaction.</li>
|
||||
<li>This demo will not work when viewing it locally due to communication restrictions between the browser and your desktop.</li>
|
||||
<li>The record size is limited to 25 records because this demo is not interacting with an actual database, but with four JSON files containing 25 records each.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<p class="small">* If you have a different JSON format and need help with the processing code, please ask the question on <a href="http://stackoverflow.com">StackOverflow</a> or message me directly (gmail; wowmotty). Please don't open an issue for help with code.</p>
|
||||
</p>
|
||||
<p class="small">* If you have a different JSON format and need help with the processing code, please ask the question on <a href="http://stackoverflow.com/questions/tagged/tablesorter">StackOverflow</a> or message me directly (gmail; wowmotty). Please don't open an issue for help with code.</p>
|
||||
</div>
|
||||
|
||||
<h1>Demo</h1>
|
||||
|
||||
Original Ajax url: <span id="origurl"></span><br>
|
||||
Current Ajax url: <span id="url"></span>
|
||||
<br>
|
||||
<table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
@ -346,6 +373,23 @@ td.pager {
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// allow THIS demo to sort the content; this variable is automatically set to true when ajax
|
||||
// is used as there isn't any way to sort the server side data from the client side.
|
||||
var $url = $('#url');
|
||||
$('table')
|
||||
|
||||
// show current URL for the DEMO ONLY
|
||||
.on('changingUrl', function(e, url){
|
||||
$url.html(url);
|
||||
})
|
||||
|
||||
// show original URL & updated URL in demo
|
||||
.on('pagerInitialized', function(){
|
||||
this.config.serverSideSorting = false;
|
||||
$('#origurl').html( this.config.pager.ajaxUrl.replace(/(\{.*?\})/g, '<span class="results">$1</span>') );
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
@ -42,7 +42,7 @@
|
||||
ajaxProcessing: function(ajax){
|
||||
if (ajax && ajax.hasOwnProperty('data')) {
|
||||
// return [ "data", "total_rows" ];
|
||||
return [ ajax.data, ajax.total_rows ];
|
||||
return [ ajax.total_rows, ajax.data ];
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
@ -105,12 +105,19 @@
|
||||
$('button.search').click(function(){
|
||||
/*** first method *** data-filter-column="1" data-filter-text="!son"
|
||||
add search value to Discount column (zero based index) input */
|
||||
var filters = $('table.tablesorter').find('input.tablesorter-filter'),
|
||||
var filters = [],
|
||||
col = $(this).data('filter-column'), // zero-based index
|
||||
txt = $(this).data('filter-text'); // text to add to filter
|
||||
|
||||
filters[col] = txt;
|
||||
$.tablesorter.setFilters( $('table.hasFilters'), filters, true ); // new v2.9
|
||||
|
||||
/** old method (prior to tablsorter v2.9 ***
|
||||
var filters = $('table.tablesorter').find('input.tablesorter-filter');
|
||||
filters.val(''); // clear all filters
|
||||
filters.eq(col).val(txt).trigger('search', false);
|
||||
******/
|
||||
|
||||
|
||||
/*** second method ***
|
||||
this method bypasses the filter inputs, so the "filter_columnFilters"
|
||||
@ -118,8 +125,8 @@
|
||||
******/
|
||||
/*
|
||||
var columns = [];
|
||||
columns[4] = '2?%'; // or define the array this way [ '', '', '', '2?%' ]
|
||||
$('table').trigger('search', [columns]);
|
||||
columns[5] = '2?%'; // or define the array this way [ '', '', '', '', '', '2?%' ]
|
||||
$('table').trigger('search', [ columns ]);
|
||||
*/
|
||||
|
||||
});
|
||||
@ -176,7 +183,7 @@ $(function(){
|
||||
<tr><td class="center">text</td><td>Any text entered in the filter will <strong>match</strong> text found within the column</td><td><code>abc</code> (finds "abc", "abcd", "abcde", etc)</td></tr>
|
||||
<tr><td class="center"><code>"</code></td><td>To exactly match the search query, add a quote, apostrophe or equal sign to the beginning and/or end of the query</td><td><code>abc"</code> or <code>abc=</code> (exactly match "abc")</td></tr>
|
||||
<tr><td class="center"><code>?</code></td><td>Wildcard for a single, non-space character.</td><td><code>J?n</code> (finds "Jan" and "Jun", but not "Joan")</td></tr>
|
||||
<tr><td class="center"><code>*</code></td><td>Wildcard for none, or multiple non-space characters.</td><td><code>B*k</code> (matches "Black" and "Book")</td></tr>
|
||||
<tr><td class="center"><code>*</code></td><td>Wildcard for zero or more non-space characters.</td><td><code>B*k</code> (matches "Black" and "Book")</td></tr>
|
||||
<tr><td class="center"><code>/\d/</code></td><td>Add any regex to the query to use in the query</td><td><code>/b[aeiou]g/i</code> (finds "bag", "beg", "BIG", "Bug", etc)</td></tr>
|
||||
<tr><td class="center"><code>< <= >= ></code></td><td>Find alphabetical or numerical values less than or greater than or equal to the filtered query</td><td><code>>= 10</code> (find values greater than or equal to 10)</td></tr>
|
||||
<tr><td class="center"><code>!</code></td><td>Not operator. Filter the column with content that <strong>do not</strong> match the query.</td><td><code>!fe</code> (hide rows with "female" in that column, but shows rows with "male")</td></tr>
|
||||
@ -220,6 +227,46 @@ $(function(){
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h3><a href="#">Methods</a></h3>
|
||||
<div>
|
||||
<h3>filterReset</h3>
|
||||
<blockquote>
|
||||
Use the <code>filterReset</code> method to reset (clear) all of the current filters using this method
|
||||
<pre class="prettyprint lang-javascript">$('table').trigger('filterReset');</pre>
|
||||
</blockquote>
|
||||
|
||||
<h3>search</h3>
|
||||
<blockquote>
|
||||
With this method, you can pass an array of filter values:
|
||||
<pre class="prettyprint lang-javascript">// apply "2?%" filter to the fifth column (zero-based index)
|
||||
var columns = [];
|
||||
columns[5] = '2?%';
|
||||
// or define the array this way var columns = [ '', '', '', '', '', '2?%' ]
|
||||
$('table').trigger('search', [ columns ]);</pre>
|
||||
or, just pass <code>false</code> to refresh the current search:
|
||||
<pre class="prettyprint lang-javascript">$('table').trigger('search', false);</pre>
|
||||
* Note: using this search method <strong>will not</strong> update the contents of the filters within the filter row; use the <code>$.tablesorter.setFilter()</code> method below to do that.
|
||||
</blockquote>
|
||||
|
||||
<h3>Get current filters</h3>
|
||||
<blockquote>
|
||||
Get an array of the currently applied filters <span class="tip"><em>New!</em></span> v2.9.
|
||||
<pre class="prettyprint lang-javascript">$.tablesorter.getFilters( $('table') ); // or $('table.hasFilters')</pre>
|
||||
This method returns an array of filter values or <code>false</code> if the selected table does not contain a filter row.
|
||||
</blockquote>
|
||||
|
||||
<h3>Set current filters</h3>
|
||||
<blockquote>
|
||||
Set the values of the actual filters using this method; include a <code>true</code> boolean to actually apply the search <span class="tip"><em>New!</em></span> v2.9.
|
||||
<pre class="prettyprint lang-javascript">// update filters, but don't apply the search
|
||||
$.tablesorter.setFilters( $('table'), [ '', '', '', '', '', '2?%' ] );
|
||||
|
||||
// update filters, AND apply the search
|
||||
$.tablesorter.setFilters( $('table'), [ '', '', '', '', '', '2?%' ], true );</pre>
|
||||
This method returns <code>true</code> if the filters were sucessfully applied, or <code>false</code> if the table does have a filter row.
|
||||
</blockquote>
|
||||
</div>
|
||||
|
||||
<h3><a href="#">Changes</a></h3>
|
||||
<div class="inner">
|
||||
<p>Moved to the wiki pages - <a href="https://github.com/Mottie/tablesorter/wiki/Change3">filter change log</a>.
|
||||
@ -248,123 +295,19 @@ $(function(){
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>Philip Aaron</td>
|
||||
<td>Johnson Sr Esq</td>
|
||||
<td>25</td>
|
||||
<td>$5.95</td>
|
||||
<td>22%</td>
|
||||
<td>Jun 26, 2004 7:22 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>11</td>
|
||||
<td>Aaron</td>
|
||||
<td>Hibert</td>
|
||||
<td>12</td>
|
||||
<td>$2.99</td>
|
||||
<td>5%</td>
|
||||
<td>Aug 21, 2009 12:21 PM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>12</td>
|
||||
<td>Brandon Clark</td>
|
||||
<td>Henry Jr</td>
|
||||
<td>51</td>
|
||||
<td>$42.29</td>
|
||||
<td>18%</td>
|
||||
<td>Oct 13, 2000 1:15 PM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>111</td>
|
||||
<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>21</td>
|
||||
<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>013</td>
|
||||
<td>Clark</td>
|
||||
<td>Kent Sr.</td>
|
||||
<td>18</td>
|
||||
<td>$15.89</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 12, 2003 11:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>005</td>
|
||||
<td>Bruce</td>
|
||||
<td>Almighty Esq</td>
|
||||
<td>45</td>
|
||||
<td>$153.19</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 18, 2021 9:12 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>10</td>
|
||||
<td>Alex</td>
|
||||
<td>Dumass</td>
|
||||
<td>13</td>
|
||||
<td>$5.29</td>
|
||||
<td>4%</td>
|
||||
<td>Jan 8, 2012 5:11 PM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>16</td>
|
||||
<td>Jim</td>
|
||||
<td>Franco</td>
|
||||
<td>24</td>
|
||||
<td>$14.19</td>
|
||||
<td>14%</td>
|
||||
<td>Jan 14, 2004 11:23 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>166</td>
|
||||
<td>Bruce Lee</td>
|
||||
<td>Evans</td>
|
||||
<td>22</td>
|
||||
<td>$13.19</td>
|
||||
<td>11%</td>
|
||||
<td>Jan 18, 2007 9:12 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>100</td>
|
||||
<td>Brenda Lee</td>
|
||||
<td>McMasters</td>
|
||||
<td>18</td>
|
||||
<td>$55.20</td>
|
||||
<td>15%</td>
|
||||
<td>Feb 12, 2010 7:23 PM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>55</td>
|
||||
<td>Dennis</td>
|
||||
<td>Bronson</td>
|
||||
<td>65</td>
|
||||
<td>$123.00</td>
|
||||
<td>32%</td>
|
||||
<td>Jan 20, 2001 1:12 PM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>9</td>
|
||||
<td>Martha</td>
|
||||
<td>delFuego</td>
|
||||
<td>25</td>
|
||||
<td>$22.09</td>
|
||||
<td>17%</td>
|
||||
<td>Jun 11, 2011 10:55 AM</td>
|
||||
</tr>
|
||||
<tr><td>1</td><td>Philip Aaron</td><td>Johnson Sr Esq</td><td>25</td><td>$5.95</td><td>22%</td><td>Jun 26, 2004 7:22 AM</td></tr>
|
||||
<tr><td>11</td><td>Aaron</td><td>Hibert</td><td>12</td><td>$2.99</td><td>5%</td><td>Aug 21, 2009 12:21 PM</td></tr>
|
||||
<tr><td>12</td><td>Brandon Clark</td><td>Henry Jr</td><td>51</td><td>$42.29</td><td>18%</td><td>Oct 13, 2000 1:15 PM</td></tr>
|
||||
<tr><td>111</td><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>21</td><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>013</td><td>Clark</td><td>Kent Sr.</td><td>18</td><td>$15.89</td><td>44%</td><td>Jan 12, 2003 11:14 AM</td></tr>
|
||||
<tr><td>005</td><td>Bruce</td><td>Almighty Esq</td><td>45</td><td>$153.19</td><td>44%</td><td>Jan 18, 2021 9:12 AM</td></tr>
|
||||
<tr><td>10</td><td>Alex</td><td>Dumass</td><td>13</td><td>$5.29</td><td>4%</td><td>Jan 8, 2012 5:11 PM</td></tr>
|
||||
<tr><td>16</td><td>Jim</td><td>Franco</td><td>24</td><td>$14.19</td><td>14%</td><td>Jan 14, 2004 11:23 AM</td></tr>
|
||||
<tr><td>166</td><td>Bruce Lee</td><td>Evans</td><td>22</td><td>$13.19</td><td>11%</td><td>Jan 18, 2007 9:12 AM</td></tr>
|
||||
<tr><td>100</td><td>Brenda Lee</td><td>McMasters</td><td>18</td><td>$55.20</td><td>15%</td><td>Feb 12, 2010 7:23 PM</td></tr>
|
||||
<tr><td>55</td><td>Dennis</td><td>Bronson</td><td>65</td><td>$123.00</td><td>32%</td><td>Jan 20, 2001 1:12 PM</td></tr>
|
||||
<tr><td>9</td><td>Martha</td><td>delFuego</td><td>25</td><td>$22.09</td><td>17%</td><td>Jun 11, 2011 10:55 AM</td></tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
|
||||
|
||||
@ -2815,10 +2815,10 @@ $.tablesorter.refreshWidgets(table, doAll, dontapply)</pre>
|
||||
|
||||
<tbody>
|
||||
<tr id="search">
|
||||
<td><a href="#" class="toggle2">search</a></td>
|
||||
<td>filter: <a href="#" class="toggle2">search</a></td>
|
||||
<td>Trigger the filter widget to update the search from current inputs and/or selections (v2.4).
|
||||
<div class="collapsible">
|
||||
This first method sends an array with the search strings to the filter widget.<pre class="prettyprint lang-javascript">$(function(){
|
||||
This first method sends an array with the search strings to the filter widget.<pre class="prettyprint lang-javascript">$(function(){
|
||||
// apply "2?%" filter to the fifth column (zero-based index)
|
||||
var columns = [];
|
||||
columns[4] = '2?%'; // or define the array this way [ '', '', '', '', '2?%' ]
|
||||
@ -2830,13 +2830,39 @@ or, directly add the search string to the filter input as follows:<pre class="pr
|
||||
$('table').trigger('search', false); // add a false flag to skip the search delay
|
||||
});</pre></div>
|
||||
</td>
|
||||
<td>Ex: <a href="example-widget-filter.html">1</a> <a href="example-widget-filter-custom.html">2</a> <a href="example-option-show-processing.html">3</a></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
<tr id="getfilters">
|
||||
<td>filter: <a href="#" class="toggle2">getFilters</a></td>
|
||||
<td>Get the currently applied filters in an array <span class="tip"><em>New!</em></span> v2.9:
|
||||
<div class="collapsible">
|
||||
<pre class="prettyprint lang-javascript">$.tablesorter.getFilters( $('table') ); // or use $('table.hasFilters') to make sure the table has a filter row</pre>
|
||||
This method returns an array of filter values (e.g. <code>[ '', '', '', '', '', '2?%' ]</code>) or <code>false</code> if the selected table does not have a filter row.
|
||||
</div>
|
||||
</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
<tr id="setfilters">
|
||||
<td>filter: <a href="#" class="toggle2">setFilters</a></td>
|
||||
<td>Set the filters using this method; include a <code>true</code> boolean to actually apply the search <span class="tip"><em>New!</em></span> v2.9:
|
||||
<div class="collapsible">
|
||||
<pre class="prettyprint lang-javascript">// update filters, but don't apply the search
|
||||
$.tablesorter.setFilters( $('table'), [ '', '', '', '', '', '2?%' ] );
|
||||
|
||||
// update filters, AND apply the search
|
||||
$.tablesorter.setFilters( $('table'), [ '', '', '', '', '', '2?%' ], true ); // this will now use the search method</pre>
|
||||
This method returns <code>true</code> if the filters were sucessfully applied, or <code>false</code> if the table does not have a filter row.
|
||||
</div>
|
||||
</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
<tr id="filterreset">
|
||||
<td><a href="#" class="toggle2">filterReset</a></td>
|
||||
<td>filter: <a href="#" class="toggle2">filterReset</a></td>
|
||||
<td>Trigger the filter widget to reset the search criteria (v2.7.7).
|
||||
<div class="collapsible">
|
||||
<div class="collapsible"><br>
|
||||
If you are using the <code>filter_formatter</code> option to add custom input elements, this function may not work on those columns. Please refer to the <code>filter_formatter</code> section for more details.
|
||||
<pre class="prettyprint lang-javascript">$(function(){
|
||||
// this is the same code that the <code>filter_reset</code> element runs to clear out the filters.
|
||||
@ -2854,6 +2880,7 @@ or, directly add the search string to the filter input as follows:<pre class="pr
|
||||
<pre class="prettyprint lang-javascript">$(function(){
|
||||
$('button').click(function(){
|
||||
$('table').trigger('saveSortReset');
|
||||
});
|
||||
});</pre></div>
|
||||
</td>
|
||||
<td></td>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user