Save date range filtering on page reload

timwilson

I am doing filtering based on date ranges using the example talked about here:

http://www.datatables.net/forums/discussion/313/filter-date-range/p1

This example specifically:

http://live.datatables.net/etewoq/4/edit#javascript,html

I have it working fine, but would like to save the date range using the bStateSave using the same type of idea as the way to save column filtering in oSettings as shown in this thread:

http://datatables.net/forums/discussion/2864/x#Item_3

The way I see it all I need to be able to do is store the min and max dates in the state save and reload them into the input boxes on load... If needed I can also set the minDateFilter and maxDateFilter at the time I am setting the input boxes.

Is this even possible? If so do you have a small code example that could get me going?

FWIW I currently have the date ranges working, and I also have implemented the column filtering with state saving as shown in this second example. Everything is working great, just would like to do the same thing with the date ranges.

timwilson

I ended up going a different route and saving this data myself using localStorage (based on this thread: http://datatables.net/forums/discussion/8154/bstatesave-cookie-when-does-this-reset/p1). I had changed my bStateSave to use localStorage already so I was somewhat familiar with what needed to be done.

It wasn't till I completed this did I find this post that may have lead me down a slightly different road:

http://datatables.net/blog/localStorage_for_state_saving

I still am happy with my solution which was cobbled together from a few different things I found here on the forums and some code writing in my head during my commute.

I do have some obvious code cleanup to do, but figured I would post my solution so others may benefit as well.

[code]
var minDateFilter;
var maxDateFilter;
var filterColumn;

var extraSettings = new Object();
var extraSettingsTemp = new Object();

var OpenAll;
var Supplier;
var AssignedTo;
var WaitingFor;
var DateMin;
var DateMax;

//other code here

$(document).ready(function () {

//load default extraSettings
loadExtraSettings("default");

//get extraSettings from localStorage
extraSettingsTemp = load_dt_view_extras(extraSettings);
if (extraSettingsTemp != null) {
extraSettings = extraSettingsTemp
}

//load saved extraSettings
loadExtraSettings("saved");

$("[id$=ddOpenAll]").val(OpenAll);
$("[id$=ddSupplier]").val(Supplier);
$("[id$=ddAssignedTo]").val(AssignedTo);
$("[id$=ddWaitingFor]").val(WaitingFor);
$("#datepicker_min").val(DateMin);
$("#datepicker_max").val(DateMax);
$("#ddFilterColumn").val(filterColumn);

minDateFilter = new Date($("#datepicker_min").val()).getTime();
maxDateFilter = new Date($("#datepicker_max").val()).getTime();
filterColumn = filterColumn = $("#ddFilterColumn").val();

$("#datepicker_min").datepicker({
"onSelect": function (date) {
minDateFilter = new Date(date).getTime();
oTable.fnDraw();
saveExtraSettings();
}
}).keyup(function () {
minDateFilter = new Date(this.value).getTime();
oTable.fnDraw();
saveExtraSettings();
});

$("#datepicker_max").datepicker({
"onSelect": function (date) {
maxDateFilter = new Date(date).getTime();
oTable.fnDraw();
saveExtraSettings();
}
}).keyup(function () {
maxDateFilter = new Date(this.value).getTime();
oTable.fnDraw();
saveExtraSettings();
});

$("#ddFilterColumn").change(function () {
filterColumn = $("#ddFilterColumn").val();
oTable.fnDraw();
saveExtraSettings();
}).keyup(function () {
filterColumn = $("#ddFilterColumn").val();
oTable.fnDraw();
saveExtraSettings();
});

$("[id$=ddOpenAll]").change(function () {
reloadData();
saveExtraSettings();
}).keyup(function () {
reloadData();
saveExtraSettings();
});

$("[id$=ddAssignedTo]").change(function () {
$("[id$=ddWaitingFor]").val(0)
reloadData();
saveExtraSettings();
}).keyup(function () {
$("[id$=ddWaitingFor]").val(0)
reloadData();
saveExtraSettings();
});

$("[id$=ddWaitingFor]").change(function () {
$("[id$=ddAssignedTo]").val(0)
reloadData();
saveExtraSettings();
}).keyup(function () {
$("[id$=ddAssignedTo]").val(0)
reloadData();
saveExtraSettings();
});

$("[id$=ddSupplier]").change(function () {
reloadData();
saveExtraSettings();
}).keyup(function () {
reloadData();
saveExtraSettings();
});

//lots of other code here

});
[/code]
And the functions:
[code]
function save_dt_view_extras(extraSettings) {
localStorage.setItem('DataTablesExtras_' + window.location.pathname, JSON.stringify(extraSettings));
}
function load_dt_view_extras(extraSettings) {
return JSON.parse(localStorage.getItem('DataTablesExtras_' + window.location.pathname));
}
function reset_dt_view_extras() {
localStorage.removeItem('DataTablesExtras_' + window.location.pathname);
//window.location.reload()
}

function saveExtraSettings() {
OpenAll = $("[id$=ddOpenAll]").val();
Supplier = $("[id$=ddSupplier]").val();
AssignedTo = $("[id$=ddAssignedTo]").val();
WaitingFor = $("[id$=ddWaitingFor]").val();
DateMin = $("#datepicker_min").val();
DateMax = $("#datepicker_max").val();
filterColumn = $("#ddFilterColumn").val();

setExtraSettings(OpenAll, Supplier, AssignedTo, WaitingFor, DateMin, DateMax, filterColumn);
save_dt_view_extras(extraSettings);
}

function setExtraSettings(OpenAll, Supplier, AssignedTo, WaitingFor, DateMin, DateMax, filterColumn) {
extraSettings.OpenAll = OpenAll;
extraSettings.Supplier = Supplier;
extraSettings.AssignedTo = AssignedTo;
extraSettings.WaitingFor = WaitingFor;
extraSettings.DateMin = DateMin;
extraSettings.DateMax = DateMax;
extraSettings.filterColumn = filterColumn;
}

function loadExtraSettings(loadType) {
if (loadType == "default") {
OpenAll = $("[id$=ddOpenAll]").val();
Supplier = $("[id$=ddSupplier]").val();
AssignedTo = $("[id$=ddAssignedTo]").val();
WaitingFor = $("[id$=ddWaitingFor]").val();
DateMin = $("#datepicker_min").val();
DateMax = $("#datepicker_max").val();
filterColumn = $("#ddFilterColumn").val();
}
else {
if (! $.isEmptyObject(extraSettings)) {
OpenAll = extraSettings.OpenAll;
Supplier = extraSettings.Supplier;
AssignedTo = extraSettings.AssignedTo;
WaitingFor = extraSettings.WaitingFor;
DateMin = extraSettings.DateMin;
DateMax = extraSettings.DateMax;
filterColumn = extraSettings.filterColumn;
}
}
}
[/code]

Looking over this code there are a lot of places I am doing more than needed and there is a lot of cleanup needed, but it is working and may help someone else get there head around what I have done.

I call the reset function when I call the reset function for the localStorage for the bStateSave of the main DataTables Settings so to the end user they seem to be one in the same.

allan

Looks good. The fnStateLoadParams and fnStateSaveParams are the two callbacks in DataTables for manipulating the information that is stored (adding more, reading them back etc). It can be a little tricky getting everything in the right order though Also DataTables v1.10 is going to use localStorage by default :-).

Allan