Server side datatable with custom filter not saving state
Server side datatable with custom filter not saving state
DigitalFusion
Posts: 10Questions: 5Answers: 1
Hello,
I am trying to implement state saving on an ajax datatable with a couple of custom filters. Its not working and I am not sure what is wrong. The filters work on initial selection. When returning to or refreshing the page, none of the selected filters are saved.
<script type="text/javascript" charset="utf-8">
$(document).ready(function () {
$.fn.dataTable.moment('MM-DD-YYYY');
var table = $('#table-nn').DataTable({
"dom": "<'row'<'col-sm-3'l><'col-sm-5'f><'col-sm-4 mt10'B>>\
<'row'<'col-sm-4'<'severityFilterDiv'>>\
<'col-sm-4'<'statusFilterDiv'>>\
<'col-sm-4'<'pendingReplyFilterDiv'>>>\
<'table-responsive'rt><'row'<'col-sm-6'i><'col-sm-6'p>>",
"processing": true,
"serverSide": true,
"stateSave": true,
"stateSaveParams": function (settings, data) {
data.severityFilter = $('#severityFilter').val()
data.statusFilter = $('#statusFilter').val()
data.pendingReplyFilter = $('#pendingReplyFilter').val()
},
"stateLoadParams": function (settings, data) {
$('#severityFilter').val(data.severityFilter)
$('#statusFilter').val(data.statusFilter)
$('#pendingReplyFilter').val(data.pendingReplyFilter)
},
"stateSaveCallback": function(settings, data) {;
$.ajax({
"url": 'ajax_dataTable.asp',
"type": 'POST',
"data": function (d) {
d.severity = $('#severityFilter').val();
d.status = $('#statusFilter').val();
d.pendingReply = $('#pendingReplyFilter').val();
},
error: function (xhr, error, thrown) {
alert('Unable to load data');
}
});
},
"ajax": {
"url": 'ajax_dataTable.asp',
"type": 'POST',
"data": function (d) {
d.severity = $('#severityFilter').val();
d.status = $('#statusFilter').val();
d.pendingReply = $('#pendingReplyFilter').val();
},
error: function (xhr, error, thrown) {
alert('Unable to load data');
}
},
"aaSorting": [[1, "desc"]], //default sort column
responsive: {
details: {
type: 'column',
target: 'tr'
}
},
"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
"bSortClasses": false,
"oLanguage": { "sSearch": "<i class='ico-search'></i> " },
"buttons": [
{
extend: 'collection',
text: '<i class="ico-file-download mr5"></i>Tools',
buttons: [
{ extend: 'csv', text: 'Export Current View to CSV' },
{ extend: 'pdfHtml5', text: 'Create PDF of Current View', orientation: 'landscape', exportOptions: { columns: ':visible' } },
{ extend: 'print', text: 'Print Current View', exportOptions: { columns: ':visible', autoPrint: true } }
]
},
{
extend: 'colvis',
text: '<i class="ico-eye mr5"></i>Toggle Columns',
}
]
});
$('.dataTables_filter input').attr("placeholder", "search");
$("div.severityFilterDiv").html("<div class='row'><div class='col-xs-5'>\<label class='control-label mt5 ml15'>Severity:</label></div>\
<div class='col-xs-6 pl0 text-left'><select name='severityFilter' id='severityFilter' class='form-control pull-left'>\
<option value=''>View All</option>\
<option value='3'>High</option>\
<option value='2'>Medium</option>\
<option value='1'>Low</option>\
</select></div></div>");
$("div.statusFilterDiv").html("<div class='row'><div class='col-xs-4'>\<label class='control-label mt5 ml15'>Status:</label></div>\
<div class='col-xs-6 pl0 text-left'><select name='statusFilter' id='statusFilter' class='form-control pull-left'>\
<option value=''>View All</option>\
<option value='1'>Draft</option>\
<option value='2'>Pending</option>\
<option value='4'>Resolved</option>\
</select></div></div>");
$("div.pendingReplyFilterDiv").html("<div class='row'><div class='col-xs-6'>\<label class='control-label mt5 ml15'>Pending Reply:</label></div>\
<div class='col-xs-6 pl0 text-left'><select name='pendingReplyFilter' id='pendingReplyFilter' class='form-control pull-left'>\
<option value=''>View All</option>\
<option value='Yes'>Yes</option>\
<option value='No'>No</option>\
<option value='N/A'>N/A</option>\
</select></div></div>");
$('#severityFilter, #statusFilter, #pendingReplyFilter').change(function (e) {
table.draw();
});
});
</script>
This question has an accepted answers - jump to answer
Answers
My guess is that the inputs you are creating on lines 78-100 are after the Datatables initialization. Try creating them before so the inputs are in the DOM when
stateLoadParamsis executed.Kevin
Thanks for the tip. However, If I create the inputs before the table is initialized, they are ignored/not shown, as the divs that I am setting the .html on do not yet exist
I created a simple test case with one of your inputs to your code show it works if the inputs are created before Datatables is initialized.
http://live.datatables.net/ruwohuxe/1/edit
If you want to update the test or provide a link to your page or another test case we will take a look to offer suggetstion.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case
Kevin
Thanks for the tip again, I do appreciate you taking the time to reply.
That works because the divs are not part of the dom definition:
I suppose I can try pulling them out and placing them in the html like that example
Pulling them out worked. The UI isn't as pretty, but at least its working.
Thanks for your help!
I didn't notice you were displaying them with the
domoption. I tried a few things but couldn't get the first draw to load the parameters usingajax.data. Even withdeferLoadingthe initial ajax request is setup before the select inputs are placed in thedom. Here is my attempt:http://live.datatables.net/ruwohuxe/2/edit
I used the
setTimeoutininitCompletebecause the input wasn't quite ready in the dom when using$('#severityFilter').val(severityFilter);to set the input.Feel free to mess with it if you wish. Maybe @allan or @colin can recommend a way to get this to work that isn't overly complex.
Kevin
Maybe this option will work. Build your select inputs into a hidden
div. Then ininitCompletemove the inputs to thedomtoolbar. Something like this:http://live.datatables.net/ruwohuxe/3/edit
Kevin