library-mirrors/tablesorter
1
0
Fork 0
mirror of https://github.com/Mottie/tablesorter.git synced 2025-01-12 15:24:21 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Storage: add a bunch of storage widget options. Fixes #851

Browse Source
This commit is contained in:
Mottie 2015-03-25 20:21:27 -05:00
parent a840a4e7ff
commit d8abaadc29
7 changed files with 256 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
dist/js/jquery.tablesorter.widgets.js vendored
View File

@ -37,26 +37,39 @@ var ts = $.tablesorter = $.tablesorter || {};
ts.storage = function(table, key, value, options) {
table = $(table)[0];
var cookieIndex, cookies, date,
hasLocalStorage = false,
hasStorage = false,
values = {},
c = table.config,
wo = c && c.widgetOptions,
storageType = ( options && options.useSessionStorage ) || ( wo && wo.storage_useSessionStorage ) ?
'sessionStorage' : 'localStorage',
$table = $(table),
id = options && options.id || $table.attr(options && options.group ||
'data-table-group') || table.id || $('.tablesorter').index( $table ),
url = options && options.url || $table.attr(options && options.page ||
'data-table-page') || c && c.fixedUrl || window.location.pathname;
// id from (1) options ID, (2) table "data-table-group" attribute, (3) widgetOptions.storage_tableId,
// (4) table ID, then (5) table index
id = options && options.id ||
$table.attr( options && options.group || wo && wo.storage_group || 'data-table-group') ||
wo && wo.storage_tableId || table.id || $('.tablesorter').index( $table ),
// url from (1) options url, (2) table "data-table-page" attribute, (3) widgetOptions.storage_fixedUrl,
// (4) table.config.fixedUrl (deprecated), then (5) window location path
url = options && options.url ||
$table.attr(options && options.page || wo && wo.storage_page || 'data-table-page') ||
wo && wo.storage_fixedUrl || c && c.fixedUrl || window.location.pathname;
// https://gist.github.com/paulirish/5558557
if ('localStorage' in window) {
if (storageType in window) {
try {
window.localStorage.setItem('_tmptest', 'temp');
hasLocalStorage = true;
window.localStorage.removeItem('_tmptest');
} catch(error) {}
window[storageType].setItem('_tmptest', 'temp');
hasStorage = true;
window[storageType].removeItem('_tmptest');
} catch(error) {
if (c && c.debug) {
ts.log( storageType + ' is not supported in this browser' );
}
}
}
// *** get value ***
if ($.parseJSON) {
if (hasLocalStorage) {
values = $.parseJSON(localStorage[key] || 'null') || {};
if (hasStorage) {
values = $.parseJSON( window[storageType][key] || 'null' ) || {};
} else {
// old browser, using cookies
cookies = document.cookie.split(/[;\s|=]/);
@ -73,8 +86,8 @@ ts.storage = function(table, key, value, options) {
}
values[url][id] = value;
// *** set value ***
if (hasLocalStorage) {
localStorage[key] = JSON.stringify(values);
if (hasStorage) {
window[storageType][key] = JSON.stringify(values);
} else {
date = new Date();
date.setTime(date.getTime() + (31536e+6)); // 365 days

4
dist/js/jquery.tablesorter.widgets.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/js/widgets/widget-storage.min.js vendored
View File

@ -1,2 +1,2 @@
/*! Widget: storage */
!function(a,b,c){"use strict";var d=a.tablesorter=a.tablesorter||{};d.storage=function(d,e,f,g){d=a(d)[0];var h,i,j,k=!1,l={},m=d.config,n=a(d),o=g&&g.id||n.attr(g&&g.group||"data-table-group")||d.id||a(".tablesorter").index(n),p=g&&g.url||n.attr(g&&g.page||"data-table-page")||m&&m.fixedUrl||b.location.pathname;if("localStorage"in b)try{b.localStorage.setItem("_tmptest","temp"),k=!0,b.localStorage.removeItem("_tmptest")}catch(q){}return a.parseJSON&&(k?l=a.parseJSON(localStorage[e]||"null")||{}:(i=c.cookie.split(/[;\s|=]/),h=a.inArray(e,i)+1,l=0!==h?a.parseJSON(i[h]||"null")||{}:{})),(f||""===f)&&b.JSON&&JSON.hasOwnProperty("stringify")?(l[p]||(l[p]={}),l[p][o]=f,k?localStorage[e]=JSON.stringify(l):(j=new Date,j.setTime(j.getTime()+31536e6),c.cookie=e+"="+JSON.stringify(l).replace(/\"/g,'"')+"; expires="+j.toGMTString()+"; path=/"),void 0):l&&l[p]?l[p][o]:""}}(jQuery,window,document);
!function(a,b,c){"use strict";var d=a.tablesorter=a.tablesorter||{};d.storage=function(e,f,g,h){e=a(e)[0];var i,j,k,l=!1,m={},n=e.config,o=n&&n.widgetOptions,p=h&&h.useSessionStorage||o&&o.storage_useSessionStorage?"sessionStorage":"localStorage",q=a(e),r=h&&h.id||q.attr(h&&h.group||o&&o.storage_group||"data-table-group")||o&&o.storage_tableId||e.id||a(".tablesorter").index(q),s=h&&h.url||q.attr(h&&h.page||o&&o.storage_page||"data-table-page")||o&&o.storage_fixedUrl||n&&n.fixedUrl||b.location.pathname;if(p in b)try{b[p].setItem("_tmptest","temp"),l=!0,b[p].removeItem("_tmptest")}catch(t){n&&n.debug&&d.log(p+" is not supported in this browser")}return a.parseJSON&&(l?m=a.parseJSON(b[p][f]||"null")||{}:(j=c.cookie.split(/[;\s|=]/),i=a.inArray(f,j)+1,m=0!==i?a.parseJSON(j[i]||"null")||{}:{})),(g||""===g)&&b.JSON&&JSON.hasOwnProperty("stringify")?(m[s]||(m[s]={}),m[s][r]=g,l?b[p][f]=JSON.stringify(m):(k=new Date,k.setTime(k.getTime()+31536e6),c.cookie=f+"="+JSON.stringify(m).replace(/\"/g,'"')+"; expires="+k.toGMTString()+"; path=/"),void 0):m&&m[s]?m[s][r]:""}}(jQuery,window,document);

18
docs/example-widget-resizable.html
View File

@ -41,6 +41,7 @@
// initialize zebra striping and resizable widgets on the table
widgets: [ "zebra", "resizable", "stickyHeaders" ],
widgetOptions: {
storage_useSessionStorage : true,
resizable_addLastColumn : true
}
});
@ -192,7 +193,11 @@ resizable_widths : [ '10%', '10%', '40px', '10%', '100px' ]</pre>
<h1>Demo</h1>
<div id="demo">
<h3>Non-full width table <small>(individual columns resize)</small></h3>
<h3>
Non-full width table
<sup class="results">&dagger;</sup>
<small>(individual columns resize)</small>
</h3>
<table class="narrow-table" style="width:auto">
<thead>
<tr>
@ -247,8 +252,15 @@ resizable_widths : [ '10%', '10%', '40px', '10%', '100px' ]</pre>
</tr>
</tbody>
</table>
<small><span class="results">&dagger;</span> Resized values for this table are saved to <em>session storage</em> - values are lost once the browser is closed.</small>
<h3>Full width table <small>(use shift to force last column to resize)</small></h3>
<br><br>
<h3>
Full width table
<sup class="results">&Dagger;</sup>
<small>(use shift to force last column to resize)</small>
</h3>
<table class="full-width-table">
<thead>
<tr>
@ -303,7 +315,9 @@ resizable_widths : [ '10%', '10%', '40px', '10%', '100px' ]</pre>
</tr>
</tbody>
</table>
<small><span class="results">&Dagger;</span> Resized values for this table are saved to <em>local storage</em> - values are not lost once the browser is closed.</small>
</div>
<p></p>
<h1>Page Header</h1>
<div>

209
docs/index.html
View File

@ -1809,7 +1809,7 @@ $(function(){
<pre class="prettyprint lang-js">$(function(){
$("table").tablesorter({
// initialize a bunch of widgets
// initialize a bunch of widgets (the order doesn't matter)
widgets: ["zebra", "uitheme", "columns", "filter", "resizable", "stickyHeaders"],
widgetOptions: {
@ -1878,6 +1878,20 @@ $(function(){
// Set to true for server-side filtering
filter_serversideFiltering : false,
// *** resizable widget ***
// if false, resized columns are not saved for next page reload
resizable : true,
// if true, the last column will be resizable (use in non-full width tables)
resizable_addLastColumn: false,
// Add the starting & reset header widths
resizable_widths : [],
// throttle resizable event (needed for slow browsers)
resizable_throttle : false,
// *** savesort widget ***
// if false, the sort will not be saved for next page reload
saveSort : true,
// *** stickyHeaders widget ***
// extra class name added to the sticky header row
stickyHeaders : '',
@ -1900,28 +1914,24 @@ $(function(){
// The zIndex of the stickyHeaders, allows the user to adjust this to their needs
stickyHeaders_zIndex : 2,
// *** resizable widget ***
// if false, resized columns are not saved for next page reload
resizable : true,
// if true, the last column will be resizable (use in non-full width tables)
resizable_addLastColumn: false,
// Add the starting & reset header widths
resizable_widths : [],
// throttle resizable event (needed for slow browsers)
resizable_throttle : false,
// *** savesort widget ***
// if false, the sort will not be saved for next page reload
saveSort : true,
// *** storage widget ***
// allows switching between using local & session storage
storage_useSessionStorage : false,
// alternate table id (set if grouping multiple tables together)
storage_tableId : '',
// table attribute to get the table ID, if storage_tableId is undefined
storage_group : '', // defaults to "data-table-group"
// alternate url to use (set if grouping tables across multiple pages)
storage_fixedUrl : '',
// table attribute to get the fixedUrl, if storage_fixedUrl is undefined
storage_page : '',
// *** zebra widget ***
// class names to add, default is [ "even", "odd" ]
// class names to add to alternate rows, default is [ "even", "odd" ]
zebra : ["ui-widget-content even", "ui-state-default odd"]
// *** uitheme widget ***
// include the name of the theme to use current options are
// "jui" (default) and "bootstrap"
// uitheme : "jui", // REMOVED OPTION; use "theme" instead
// use "config.theme" to set the theme to use
}
@ -1956,13 +1966,25 @@ $(function(){
<td><a href="example-parsers-dates.html">Example</a></td>
</tr>
</tbody>
<!-- non-sorting tbody -->
<tbody id="deprecated" class="tablesorter-infoOnly">
<tr><th colspan="5">Deprecated/Removed Options</th></tr>
</tbody>
<tbody>
<tr id="fixedurl">
<td><a href="#" class="permalink">fixedUrl</a></td>
<td><a href="#" class="permalink alert">fixedUrl</a></td>
<td>String</td>
<td>undefined</td>
<td>
This option was added to set a specific page when storing data using the <a href="#function-storage"><code>$.tablesorter.storage</code></a> code (<span class="version">v2.12</span>).
This option is being <span class="label label-danger">deprecated</span> in v2.21.3!
It has been replaced by <a href="#widget-storage-fixed-url"><code>widgetOptions.storage_fixedUrl</code></a>; but is still available for backwards compatibility.
<div class="collapsible"><br>
This option was added to set a specific page when storing data using the <a href="#function-storage"><code>$.tablesorter.storage</code></a> code (<span class="version">v2.12</span>).
<br>
More specifically, when the storage function is used, it attempts to give every table a unique identifier using both the page <strong>url</strong> and table <strong>ID</strong> (or index on the page if no id exists). This option allows you to override the current page url (<em>it doesn't need to be a url, just some constant value</em>) and save data for multiple tables across a domain.<br>
<br>
The table url &amp; id can also be overridden by setting table data attributes <code>data-table-page</code> (url) and <code>data-table-group</code> (id)<br>(e.g. <code>&lt;table class=&quot;tablesorter&quot; data-table-page=&quot;mydomain&quot; data-table-group=&quot;financial&quot;&gt;...&lt;/table&gt;</code>)<br>
@ -1973,15 +1995,6 @@ $(function(){
<td></td>
</tr>
</tbody>
<!-- non-sorting tbody -->
<tbody id="deprecated" class="tablesorter-infoOnly">
<tr><th colspan="5">Deprecated/Removed Options</th></tr>
</tbody>
<tbody>
<tr id="cssallowclicks">
<td><a href="#" class="permalink alert">cssAllowClicks</a></td>
<td>String</td>
@ -2002,8 +2015,8 @@ $(function(){
<td></td>
<td></td>
<td>
This option is being <span class="label label-danger">deprecated</span>!
It has been replaced by <a href="#widget-columns"><code>widgetOptions.columns</code></a>; but is still available for backwards compatibility.
This option was <span class="label label-danger">removed</span> in v2.21.2!
It has been replaced by <a href="#widget-columns"><code>widgetOptions.columns</code></a>.
<div class="collapsible">
<br>
Default value: <code>{ css: [ "primary", "secondary", "tertiary" ] }</code> (Object with Array)
@ -2025,8 +2038,8 @@ $(function(){
<td></td>
<td></td>
<td>
This option is being <span class="label label-danger">deprecated</span>!
It has been replaced by <a href="#widget-uitheme"><code>widgetOptions.uitheme</code></a>; but is still available for backwards compatibility.
This option was <span class="label label-danger">removed</span> in v2.4!
It has been replaced by <a href="#widget-uitheme"><code>widgetOptions.uitheme</code></a>.
<div class="collapsible">
<br>
Default value: <code>{ css: [ "ui-icon-arrowthick-2-n-s", "ui-icon-arrowthick-1-s", "ui-icon-arrowthick-1-n" ] }</code> (Object with Array)
@ -2056,8 +2069,8 @@ $(function(){
<td></td>
<td></td>
<td>
This option is being <span class="label label-danger">deprecated</span>!
It has been replaced by <a href="#widget-zebra"><code>widgetOptions.zebra</code></a>; but is still available for backwards compatibility.
This option was <span class="label label-danger">removed</span> in v2.4!
It has been replaced by <a href="#widget-zebra"><code>widgetOptions.zebra</code></a>.
<div class="collapsible">
<br>
Default value: <code>{ css: [ &quot;even&quot;, &quot;odd&quot; ] }</code> (Object with Array)
@ -2660,7 +2673,7 @@ $(function(){
Filter widget: Set this option to <code>false</code> to make the column content search case-sensitive, so typing in &quot;a&quot; will not find &quot;Albert&quot;. (v2.3.4)
<div class="collapsible">
<br>
Use the <a href="#widget-filter-ignorecase"><code>filter_ignorecase</code></a> option as follows:
Use the <a href="#widget-filter-ignorecase"><code>filter_ignoreCase</code></a> option as follows:
<pre class="prettyprint lang-js">$(function(){
$("table").tablesorter({
widgets: ["filter"],
@ -2774,7 +2787,7 @@ $(function(){
Filter widget: If the storage utility is available (included with <code>jquery.tablesorter.widgets.js</code> file, the last applied filter is saved to storage (<span class="version">v2.14</span>).
<div class="collapsible">
<br>
Filters saved to local storage (or cookies) will override any default filters within the header data-attribute (set by the <a href="#widget-filter-defaultattrib"><code>filter_defaultAttrib</code> option</a> and be available to the pager before any ajax calls are made.<br>
Filters saved to local storage (or cookies) will override any default filters within the header data-attribute (set by the <a href="#widget-filter-defaultattrib"><code>filter_defaultAttrib</code> option</a>) and be available to the pager before any ajax calls are made.<br>
<br>
To bypass this behavior, clear out the saved filters as follows:
<pre class="prettyprint lang-js">$.tablesorter.storage( $('table'), 'tablesorter-filters', '' );</pre>
@ -3379,7 +3392,7 @@ $('table').trigger('search', false);</pre></div>
<br>
Set this option to either <code>true</code> for a default 5 millisecond delay, or set it to any number less than 10 to adjust the throttling delay that is applied to the mousemove/resizing event.<br>
<br>
Use the <a href="#widget-resizable-throttle"><code>&quot;resizable_widths&quot;</code></a> option as follows:
Use the <a href="#widget-resizable-throttle"><code>&quot;resizable_throttle&quot;</code></a> option as follows:
<pre class="prettyprint lang-js">$(function(){
$("table").tablesorter({
widgets: ["resizable"],
@ -3416,6 +3429,88 @@ $('table').trigger('search', false);</pre></div>
<td><a href="example-widget-savesort.html">Example</a></td>
</tr>
<tr id="widget-storage-use-session-storage">
<td><a href="#" class="permalink">storage_useSessionStorage</a></td>
<td>Boolean</td>
<td>false</td>
<td>
Storage widget: If this option is set to <code>false</code>, all saved variables for the table will be within local storage.
<div class="collapsible">
<p>If <code>true</code>, all saved variables for the table will be within the session storage. This means once the user closes the browser, all saved variables are lost.</p>
Use the <a href="#widget-storage-use-session-storage"><code>&quot;storage_useSessionStorage&quot;</code></a> option to switch to session storage as follows:
<pre class="prettyprint lang-js">$(function(){
$("table").tablesorter({
widgets: ["saveSort"],
widgetOptions : {
// if false, saved variables will be saved in local storage
storage_useSessionStorage : true
}
});
});</pre></div>
</td>
<td><a href="example-widget-resizable.html">Example</a></td>
</tr>
<tr id="widget-storage-table-id">
<td><a href="#" class="permalink">storage_tableId</a></td>
<td>String</td>
<td>""</td>
<td>
Storage widget: This option allows setting an alternate table id so multiple tables on a page have the settings grouped together
<div class="collapsible">
<p>When grouping together multiple tables, setting the variable on one table will not cause the setting to modify a second table, the change will only be apparent on page reload.</p>
<p>If this option is not defined, the actual table id will be used (which isn't conducive to applying to multiple tables!)</p>
<p>A more detailed list of the table id priority settings can be found in the <a href="#function-storage"><code>$.tablesorter.storage</a></code> function description.</p>
</div>
</td>
<td></td>
</tr>
<tr id="widget-storage-group">
<td><a href="#" class="permalink">storage_group</a></td>
<td>String</td>
<td>""</td>
<td>
Storage widget: Set a table (data) attribute to use to obtain a table id, which allows grouping multiple tables on one page together - they share a common saved setting.
<div class="collapsible">
<p>If a value is set in this option, the storage widget looks in that defined table data-attribute for a table id.</p>
<p>If this option is not defined, then the default data-attribute for the table becomes <code>"data-table-group"</code>.</p>
<p>The value in the data-attribute sets a table id, if not found, the storage widget then looks for an id in the <a href="#widget-storage-table-id"><code>storage_tableId</code></a> option.</p>
</div>
</td>
<td></td>
</tr>
<tr id="widget-storage-fixed-url">
<td><a href="#" class="permalink">storage_fixedUrl</a></td>
<td>String</td>
<td>""</td>
<td>
Storage widget: This option allows setting an alternate table url so that tables on multiple pages will have their settings grouped together
<div class="collapsible">
<p>This option replaces and will override the now deprecated <code>config.fixedUrl</code> option.</p>
<p>If there is a value within the table's "data-table-page" (set by the <code>storage_page</code> option), it will override this setting.</p>
<p>A more detailed list of the table url priority settings can be found in the <a href="#function-storage"><code>$.tablesorter.storage</a></code> function description.</p>
</div>
</td>
<td></td>
</tr>
<tr id="widget-storage-page">
<td><a href="#" class="permalink">storage_page</a></td>
<td>String</td>
<td>""</td>
<td>
Storage widget: Set a table (data) attribute to use to obtain a table url, which allows grouping tables across multiple pages together - they share a common saved setting.
<div class="collapsible">
<p>If a value is set in this option, the storage widget looks in that defined table data-attribute for a table url.</p>
<p>If this option is not defined, then the default data-attribute for the table becomes <code>"data-table-page"</code>.</p>
<p>The value in the data-attribute sets a table url, if not found, the storage widget then looks for a url in the <a href="#widget-storage-fixed-url"><code>storage_fixedUrl</code></a> option.</p>
</div>
</td>
<td></td>
</tr>
<tr id="widget-zebra">
<td><a href="#" class="permalink">zebra</a></td>
<td>Array</td>
@ -4179,7 +4274,7 @@ $('table').trigger('search', false);</pre></div>
<td>Boolean</td>
<td>false</td>
<td>
Filter widget: This option was <span class="label label-danger">removed</span> in <span class="version updated">v2.15</span>... sorry for the sudden notice.
Filter: This option was <span class="label label-danger">removed</span> in <span class="version updated">v2.15</span>... sorry for the sudden notice.
<div class="collapsible">
<br>
This option has been replaced by the <a href="#widget-filter-external"><code>filter_external</code></a> option.<br>
@ -4214,9 +4309,10 @@ $('table').trigger('search', false);</pre></div>
<td><a href="#" class="permalink alert">uitheme</a></td>
<td>String</td>
<td>&quot;jui&quot;</td>
<td>
<td>UiTheme: This option was <span class="label label-danger">removed</span> in v2.19.0!
It has been replaced by <a href="#theme">theme</a>.
<div class="collapsible"><br>
This option contains the name of the theme. Currently jQuery UI (&quot;jui&quot;) and Bootstrap (&quot;bootstrap&quot;) themes are supported (updated v2.4)
<div class="collapsible">
<p>
<span class="label label-warning">* NOTE *</span> only the <code>uitheme</code> widget option was removed. All of the information below is still pertinent and portions have been copied to the core <a href="#theme"><code>theme</code></a> option.
</p>
@ -4284,7 +4380,7 @@ $.extend($.tablesorter.themes.jui, {
<td>Numeric</td>
<td>0</td>
<td>
This pager plugin option has been <span class="label label-danger">removed</span>!
Pager: This option was <span class="label label-danger">removed</span>!
<div class="collapsible">
<br>
The original tablesorter pager plugin absolutely positioned the pager controls at the bottom of the table. It appears that this option was intended to tweak the position of the pager container. The option exists, but no code was found.</div>
@ -4297,7 +4393,7 @@ $.extend($.tablesorter.themes.jui, {
<td>Boolean</td>
<td>true</td>
<td>
This pager plugin option has been <span class="label label-danger">removed</span>!
Pager: This option was <span class="label label-danger">removed</span>!
<div class="collapsible">
<br>
If this option were true, the original tablesorter pager plugin would absolutely position the pager controls at the bottom of the table.</div>
@ -4310,7 +4406,7 @@ $.extend($.tablesorter.themes.jui, {
<td>String</td>
<td>&quot;/&quot;</td>
<td>
This pager plugin option has been <span class="label label-danger">removed</span>! Use the <a href="#pager-output">output</a> option to allow for more control over the formatting.
Pager: This option was <span class="label label-danger">removed</span>! Use the <a href="#pager-output">output</a> option to allow for more control over the formatting.
<div class="collapsible">
<br>
The original tablesorter pager plugin would combine the current page with the calculated total number of pages within the <a href="#pager-csspagedisplay">cssPageDisplay</a> with this separator string inbetween.</div>
@ -6707,7 +6803,7 @@ $.tablesorter.addHeaderResizeEvent( table, true );</pre>
</ul>
This function attempts to give every table a unique identifier using both the page url and table id (or index on the page if no id exists), by default. Here is a usage example and a look at what is stored within the local storage:
<pre class="prettyprint lang-js">$.tablesorter.storage( $('#tablesorter-demo')[0], 'test', '123');
// stored as, test = : {"/tablesorter/docs/":{"tablesorter-demo":"123"}}
// stored under the "test" value as {"/tablesorter/docs/":{"tablesorter-demo":"123"}}
</pre>
The saved table url & id can be overridden by setting table data attributes <code>data-table-page</code> (url) and <code>data-table-group</code> (id), as in this sample markup:
@ -6717,30 +6813,37 @@ $.tablesorter.addHeaderResizeEvent( table, true );</pre>
id : 'group1',
// this group option sets name of the table attribute with the ID;
// but the value within this data attribute is overridden by the above id option
group: 'data-table-group'
group: 'data-table-group',
// table pages
url : 'page1',
// this page option sets name of the table attribute with the page/url;
// but the value within the data attribute is overridden by the above url option
page: 'data-table-page'
page: 'data-table-page',
// Option added v2.21.3; if `true` the storage function will use sessionStorage
// if not defined, the `config.widgetOptions.storage_useSessionStorage` setting is checked
// if no settings are found, it will default to `false`, and use localStorage
useSessionStorage : false
});</pre>
The priority of table ID settings is as follows:
<ol>
<li><code>options.id</code> setting</li>
<li>Table data attribute (<code>data-table-group</code> by default) value</li>
<li>Table id</li>
<li>Index of the table on the page</li>
<li>Table data attribute (<code>"data-table-group"</code> by default) value</li>
<li><a href="#widget-storage-table-id"><code>widgetOptions.storage_tableId</code></a> option</li>
<li>Table id attribute</li>
<li>Index of the table (compared to other tables with a "tablesorter" class name) on the page</li>
</ol>
The priority of table url (group) settings is as follows:
<ol>
<li><code>options.url</code> setting</li>
<li>Table data attribute (<code>data-table-page</code> by default) value</li>
<li><a href="#fixedurl"><code>fixedUrl</code></a> option value</li>
<li>Table data attribute (<code>"data-table-page"</code> by default) value</li>
<li><a href="#widget-storage-fixed-url"><code>widgetOptions.storage_fixedUrl</code></a> option value</li>
<li><a href="#fixedurl" class="alert" title="deprecated"><code>config.fixedUrl</code></a> option value</li>
<li><code>window.location.pathname</code></li>
</ol>
<br>
The <a href="#fixedurl"><code>fixedUrl</code></a> option allows you to override the current page url (it doesn't need to be a url, just some constant value) and save data for multiple tables across a domain. The value from this option has a lower priority than the <code>options</code> id or group settings (see priority list above).<br>
The <a href="#widget-storage-fixed-url"><code>storage_fixedUrl</code></a> widget option allows you to override the current page url (it doesn't need to be a url, just some constant value) and save data for multiple tables across a domain. The value from this option has a lower priority than the <code>options</code> id or group settings (see priority list above).<br>
<br>
When using the storage utility to <em>get</em> a value <em>and</em> use custom table options, set the <code>value</code> parameter to <code>null</code>.<br>
<br>

41
js/jquery.tablesorter.widgets.js
View File

@ -43,26 +43,39 @@ var ts = $.tablesorter = $.tablesorter || {};
ts.storage = function(table, key, value, options) {
table = $(table)[0];
var cookieIndex, cookies, date,
hasLocalStorage = false,
hasStorage = false,
values = {},
c = table.config,
wo = c && c.widgetOptions,
storageType = ( options && options.useSessionStorage ) || ( wo && wo.storage_useSessionStorage ) ?
'sessionStorage' : 'localStorage',
$table = $(table),
id = options && options.id || $table.attr(options && options.group ||
'data-table-group') || table.id || $('.tablesorter').index( $table ),
url = options && options.url || $table.attr(options && options.page ||
'data-table-page') || c && c.fixedUrl || window.location.pathname;
// id from (1) options ID, (2) table "data-table-group" attribute, (3) widgetOptions.storage_tableId,
// (4) table ID, then (5) table index
id = options && options.id ||
$table.attr( options && options.group || wo && wo.storage_group || 'data-table-group') ||
wo && wo.storage_tableId || table.id || $('.tablesorter').index( $table ),
// url from (1) options url, (2) table "data-table-page" attribute, (3) widgetOptions.storage_fixedUrl,
// (4) table.config.fixedUrl (deprecated), then (5) window location path
url = options && options.url ||
$table.attr(options && options.page || wo && wo.storage_page || 'data-table-page') ||
wo && wo.storage_fixedUrl || c && c.fixedUrl || window.location.pathname;
// https://gist.github.com/paulirish/5558557
if ('localStorage' in window) {
if (storageType in window) {
try {
window.localStorage.setItem('_tmptest', 'temp');
hasLocalStorage = true;
window.localStorage.removeItem('_tmptest');
} catch(error) {}
window[storageType].setItem('_tmptest', 'temp');
hasStorage = true;
window[storageType].removeItem('_tmptest');
} catch(error) {
if (c && c.debug) {
ts.log( storageType + ' is not supported in this browser' );
}
}
}
// *** get value ***
if ($.parseJSON) {
if (hasLocalStorage) {
values = $.parseJSON(localStorage[key] || 'null') || {};
if (hasStorage) {
values = $.parseJSON( window[storageType][key] || 'null' ) || {};
} else {
// old browser, using cookies
cookies = document.cookie.split(/[;\s|=]/);
@ -79,8 +92,8 @@ ts.storage = function(table, key, value, options) {
}
values[url][id] = value;
// *** set value ***
if (hasLocalStorage) {
localStorage[key] = JSON.stringify(values);
if (hasStorage) {
window[storageType][key] = JSON.stringify(values);
} else {
date = new Date();
date.setTime(date.getTime() + (31536e+6)); // 365 days

41
js/widgets/widget-storage.js
View File

@ -25,26 +25,39 @@ var ts = $.tablesorter = $.tablesorter || {};
ts.storage = function(table, key, value, options) {
table = $(table)[0];
var cookieIndex, cookies, date,
hasLocalStorage = false,
hasStorage = false,
values = {},
c = table.config,
wo = c && c.widgetOptions,
storageType = ( options && options.useSessionStorage ) || ( wo && wo.storage_useSessionStorage ) ?
'sessionStorage' : 'localStorage',
$table = $(table),
id = options && options.id || $table.attr(options && options.group ||
'data-table-group') || table.id || $('.tablesorter').index( $table ),
url = options && options.url || $table.attr(options && options.page ||
'data-table-page') || c && c.fixedUrl || window.location.pathname;
// id from (1) options ID, (2) table "data-table-group" attribute, (3) widgetOptions.storage_tableId,
// (4) table ID, then (5) table index
id = options && options.id ||
$table.attr( options && options.group || wo && wo.storage_group || 'data-table-group') ||
wo && wo.storage_tableId || table.id || $('.tablesorter').index( $table ),
// url from (1) options url, (2) table "data-table-page" attribute, (3) widgetOptions.storage_fixedUrl,
// (4) table.config.fixedUrl (deprecated), then (5) window location path
url = options && options.url ||
$table.attr(options && options.page || wo && wo.storage_page || 'data-table-page') ||
wo && wo.storage_fixedUrl || c && c.fixedUrl || window.location.pathname;
// https://gist.github.com/paulirish/5558557
if ('localStorage' in window) {
if (storageType in window) {
try {
window.localStorage.setItem('_tmptest', 'temp');
hasLocalStorage = true;
window.localStorage.removeItem('_tmptest');
} catch(error) {}
window[storageType].setItem('_tmptest', 'temp');
hasStorage = true;
window[storageType].removeItem('_tmptest');
} catch(error) {
if (c && c.debug) {
ts.log( storageType + ' is not supported in this browser' );
}
}
}
// *** get value ***
if ($.parseJSON) {
if (hasLocalStorage) {
values = $.parseJSON(localStorage[key] || 'null') || {};
if (hasStorage) {
values = $.parseJSON( window[storageType][key] || 'null' ) || {};
} else {
// old browser, using cookies
cookies = document.cookie.split(/[;\s|=]/);
@ -61,8 +74,8 @@ ts.storage = function(table, key, value, options) {
}
values[url][id] = value;
// *** set value ***
if (hasLocalStorage) {
localStorage[key] = JSON.stringify(values);
if (hasStorage) {
window[storageType][key] = JSON.stringify(values);
} else {
date = new Date();
date.setTime(date.getTime() + (31536e+6)); // 365 days