rooty/DataTables
1
0
Fork 0
mirror of https://github.com/DataTables/DataTables.git synced 2024-12-01 13:24:10 +01:00
Code Issues Releases Activity

New: sessionStorage and infinite state save option

Browse Source 
- The stateDuration option has been updated to provide the ability to
  indicate if sessionStorage should be used rather than localStorage
  (set value to -1).

- Settings stateDuration to 0 also indicates that the duration is
  infinity.

- Parts of the state saving have been optimised for code size, so this
  commit actually reduces the min size by 32 bytes despite the new
  abilities.

- See thread 19572 for discussion on this
This commit is contained in:
Allan Jardine 2014-04-29 10:32:55 +01:00
parent a23f09ae2d
commit e82334589d
3 changed files with 40 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.datatables-commit-sync
View File

@ -1 +1 @@
aaa08313f1d55c268ec52d7e303ceb882b06112d
6b847666f0ad910974dd35d74a36c06c81a937b7

34
examples/basic_init/state_save.html
View File

@ -18,8 +18,10 @@
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
<script type="text/javascript" language="javascript" class="init">
$('#example').dataTable( {
"stateSave": true
$(document).ready(function() {
$('#example').dataTable( {
stateSave: true
} );
} );
</script>
@ -37,20 +39,20 @@ $('#example').dataTable( {
"//datatables.net/reference/option/stateSave"><code class="option" title=
"DataTables initialisation option">stateSave<span>DT</span></code></a> option.</p>
<p>The built in state saving method uses the HTML5 <code>localStorage</code> API for efficient storage
of the data. Please note that this means that the built in state saving option <em>will not work with
IE6/7</em> as these browsers do not support this API. Alternative options of using cookies or saving
the state on the server through Ajax can be used through the <a href=
"//datatables.net/reference/option/stateSaveCallback"><code class="option" title=
"DataTables initialisation option">stateSaveCallback<span>DT</span></code></a> and <a href=
"//datatables.net/reference/option/stateLoadCallback"><code class="option" title=
<p>The built in state saving method uses the HTML5 <code>localStorage</code> and
<code>sessionStorage</code> APIs for efficient storage of the data. Please note that this means that
the built in state saving option <strong>will not work with IE6/7</strong> as these browsers do not
support these APIs. Alternative options of using cookies or saving the state on the server through Ajax
can be used through the <a href="//datatables.net/reference/option/stateSaveCallback"><code class=
"option" title="DataTables initialisation option">stateSaveCallback<span>DT</span></code></a> and
<a href="//datatables.net/reference/option/stateLoadCallback"><code class="option" title=
"DataTables initialisation option">stateLoadCallback<span>DT</span></code></a> options.</p>
<p>Additionally, note also that the duration for which the saved state is valid and can be used to
restore the table state can be set using the <a href=
"//datatables.net/reference/option/stateDuration"><code class="option" title=
<p>The duration for which the saved state is valid and can be used to restore the table state can be
set using the <a href="//datatables.net/reference/option/stateDuration"><code class="option" title=
"DataTables initialisation option">stateDuration<span>DT</span></code></a> initialisation parameter (2
hours by default).</p>
hours by default). This parameter also controls if <code>localStorage</code> (0 or greater) or
<code>sessionStorage</code> (-1) is used to store the data.</p>
<p>The example below simply shows state saving enabled in DataTables with the <a href=
"//datatables.net/reference/option/stateSave"><code class="option" title=
@ -551,8 +553,10 @@ $('#example').dataTable( {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$('#example').dataTable( {
&quot;stateSave&quot;: true
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable( {
stateSave: true
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this

49
media/js/jquery.dataTables.js vendored
View File

@ -4695,20 +4695,15 @@
/* Store the interesting variables */
var i, iLen;
var oState = {
"iCreate": new Date().getTime(),
"iCreate": +new Date(),
"iStart": oSettings._iDisplayStart,
"iLength": oSettings._iDisplayLength,
"aaSorting": $.extend( true, [], oSettings.aaSorting ),
"oSearch": $.extend( true, {}, oSettings.oPreviousSearch ),
"aoSearchCols": $.extend( true, [], oSettings.aoPreSearchCols ),
"abVisCols": []
"abVisCols": _pluck( oSettings.aoColumns, 'bVisible' )
};
for ( i=0, iLen=oSettings.aoColumns.length ; i<iLen ; i++ )
{
oState.abVisCols.push( oSettings.aoColumns[i].bVisible );
}
_fnCallbackFire( oSettings, "aoStateSaveParams", 'stateSaveParams', [oSettings, oState] );
oSettings.fnStateSaveCallback.call( oSettings.oInstance, oSettings, oState );
@ -4726,14 +4721,12 @@
var i, ien;
var columns = oSettings.aoColumns;
if ( !oSettings.oFeatures.bStateSave )
{
if ( ! oSettings.oFeatures.bStateSave ) {
return;
}
var oData = oSettings.fnStateLoadCallback.call( oSettings.oInstance, oSettings );
if ( !oData )
{
if ( !oData ) {
return;
}
@ -4741,13 +4734,13 @@
* cancelling of loading by returning false
*/
var abStateLoad = _fnCallbackFire( oSettings, 'aoStateLoadParams', 'stateLoadParams', [oSettings, oData] );
if ( $.inArray( false, abStateLoad ) !== -1 )
{
if ( $.inArray( false, abStateLoad ) !== -1 ) {
return;
}
/* Reject old data */
if ( oData.iCreate < new Date().getTime() - (oSettings.iStateDuration*1000) ) {
var duration = oSettings.iStateDuration;
if ( duration > 0 && oData.iCreate < +new Date() - (duration*1000) ) {
return;
}
@ -4763,30 +4756,26 @@
oSettings._iDisplayStart = oData.iStart;
oSettings.iInitDisplayStart = oData.iStart;
oSettings._iDisplayLength = oData.iLength;
oSettings.aaSorting = [];
var savedSort = oData.aaSorting;
for ( i=0, ien=savedSort.length ; i<ien ; i++ ) {
oSettings.aaSorting.push( savedSort[i][0] >= columns.length ?
[ 0, savedSort[i][1] ] :
savedSort[i]
);
}
oSettings.aaSorting = $.map( oData.aaSorting, function ( col, i ) {
return col[0] >= columns.length ?
[ 0, col[1] ] :
col;
} );
/* Search filtering */
$.extend( oSettings.oPreviousSearch, oData.oSearch );
$.extend( true, oSettings.aoPreSearchCols, oData.aoSearchCols );
/* Column visibility state */
for ( i=0, ien=oData.abVisCols.length ; i<ien ; i++ ) {
columns[i].bVisible = oData.abVisCols[i];
var visColumns = oData.abVisCols;
for ( i=0, ien=visColumns.length ; i<ien ; i++ ) {
columns[i].bVisible = visColumns[i];
}
_fnCallbackFire( oSettings, 'aoStateLoaded', 'stateLoaded', [oSettings, oData] );
}
/**
* Return the settings object for a particular table
* @param {node} table table we are using as a dataTable
@ -10219,7 +10208,9 @@
"fnStateLoadCallback": function ( settings ) {
try {
return JSON.parse(
localStorage.getItem('DataTables_'+settings.sInstance+'_'+location.pathname)
(settings.iStateDuration === -1 ? sessionStorage : localStorage).getItem(
'DataTables_'+settings.sInstance+'_'+location.pathname
)
);
} catch (e) {}
},
@ -10318,9 +10309,9 @@
*/
"fnStateSaveCallback": function ( settings, data ) {
try {
localStorage.setItem(
(settings.iStateDuration === -1 ? sessionStorage : localStorage).setItem(
'DataTables_'+settings.sInstance+'_'+location.pathname,
JSON.stringify(data)
JSON.stringify( data )
);
} catch (e) {}
},