State Saving Issue
State Saving Issue
Gstg
Posts: 66Questions: 4Answers: 0
I've been working with Allan and our site is going great. Our site uses a ton of custom filters utilizing the "stateSave: true" feature. All of them seem to work except one of them, the "Any Day" filter. I can't seem to find out why that one is not working. I have open credits available on my account and have not been able to get in contact with Allan recently. I would be very thankful to anyone who might see what is going wrong with the one filter save state. Unique Events, My Events, Charity Events, and Free all seem to work properly and save the state. Interests, Following are also not working. Thanks again for all the help.
The following is the code segment:
buttons: [
{
extend: 'collection',
name: 'filter',
text: 'Filter',
buttons: [
{
text: 'Any Day',
name: 'any_day',
action: function () {
var that = this;
if (anyDay) {
anyDay = false;
this.active(false);
this.ajax.reload();
}
else {
anyDay = true;
this.active(true);
this.ajax.reload();
}
}
},
{
text: 'Unique Events',
init: function (dt) {
var col = dt.column(7);
if (col.search()) {
this.active(true);
}
},
action: function (e, dt) {
var col = dt.column(7);
if (col.search()) {
col.search('').draw();
this.active(false);
}
else {
col.search('N').draw();
this.active(true);
}
}
},
{
text: 'My Events',
init: function (dt) {
var col = dt.column(7);
if (col.search()) {
this.active(true);
}
},
action: function (e, dt) {
var col = dt.column(7);
if (col.search()) {
col.search('').draw();
this.active(false);
}
else {
col.search('N').draw();
this.active(true);
}
}
},
{
text: 'Interests',
name: 'interests',
action: function () {
var that = this;
if (this.active()) {
searchKeywords = null;
this
.active(false)
.draw();
changeFilterState(table3);
}
else {
searchKeywords = new RegExp(
createSearch(<?php echo json_encode($_SESSION['key_words']);?>, false, true),
'i'
);
this
.active(true)
.processing(false)
.draw();
changeFilterState(table3);
}
}
},
{
text: 'Following',
name: 'following',
action: function () {
var that = this;
if (this.active()) {
followingIds = null;
this.active(false).draw();
changeFilterState(table3);
}
else {
this.processing(true);
$.ajax({
url: '/DataTables/ajax_following.php',
dataType: 'json',
success: function (json) {
followingIds = [];
for (var i=0; i<json.data.length; i++) {
followingIds.push(json.data[i].following_user_id);
}
that.active(true).draw();
that.processing(false);
changeFilterState(table3);
}
})
}
}
},
{
text: 'Charity Events',
init: function (dt) {
var col = dt.column(11);
if (col.search()) {
this.active(true);
}
},
action: function (e, dt) {
var col = dt.column(11);
if (col.search()) {
col.search('').draw();
this.active(false);
}
else {
col.search('Y').draw();
this.active(true);
}
}
},
{
text: 'Free',
init: function (dt) {
var col = dt.column(3);
if (col.search()) {
this.active(true);
}
},
action: function (e, dt) {
var col = dt.column(3);
if (col.search()) {
col.search('').draw();
this.active(false);
}
else {
col.search('$0').draw();
this.active(true);
}
}
}
]
},
{
extend: 'collection',
align: 'button-right',
text: 'Display',
buttons: [
{
text: 'List View',
action: function () {
$('#sort_table3').css('display', 'none');
$('#sort_grid3').css('display', 'none');
$('#sort_list3').css('display', 'grid');
table3.state.save();
}
},
{
text: 'Table View',
action: function () {
$('#sort_table3').css('display', 'table');
$('#sort_grid3').css('display', 'none');
$('#sort_list3').css('display', 'none');
table3.state.save();
}
},
{
text: 'Grid View',
action: function () {
$('#sort_table3').css('display', 'none');
$('#sort_grid3').css('display', 'grid');
$('#sort_list3').css('display', 'none');
table3.state.save();
}
},
{
popoverTitle: 'Visibility control',
align: 'button-right',
extend: 'colvis',
postfixButtons: [ 'colvisRestore' ]
},
{
align: 'button-right',
extend: 'pageLength',
}
]
}
],
order: [[5, 'asc' ], [ 6, 'asc' ]],
stateSave: true,
stateSaveParams: function (s, data) {
// Store state of table / grid views
data.displayTable = $('#sort_table3').css('display');
data.displayGrid = $('#sort_grid3').css('display');
data.displayList = $('#sort_list3').css('display');
// Remove search - session storage is used
delete data.search;
}
});
Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.
This question has accepted answers - jump to:
Answers
I see an
Any Daybutton that sets a boolean variable then performs anajax.reload(). Is theanyDayvalue used as part of theajax.data?You aren't performing any searches, ie
search()orcolumn().search(), with this button like the other Unique Events, My Events, Charity Events, and Free buttons. So there is nothing Datatables will save by default.What are you expecting to happen?
If you want the
anyDayvalue to be saved and used on subsequent page loads then you probably want to store the value yourself so it can be loaded before Datatables is intiialized. Maybe this w3schools tutorial will help.Kevin
Holding my hands up - sorry for the massive delayed reply to our e-mail support thread @Gstg! I've replied now.
And Kevin - seriously epic. You've hit the nail on the head with seeing only part of the code. The
anyDayparameter did indeed need to be state saved and then restored.Allan
Thank so much for the help Kevin and Allan. You guys are amazing with the support you offer on this board! My hat is off to both of you 8-)