Replies

• timwilson Posts: 7Questions: 0Answers: 0

  November 2012 edited November 2012

  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 Posts: 63,689Questions: 1Answers: 10,500 Site admin

  November 2012

  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