Server side datatable with custom filter not saving state

DigitalFusion

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>&nbsp;" },
                "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>

kthorngren

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 stateLoadParams is executed.

Kevin

DigitalFusion

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

kthorngren

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

DigitalFusion

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:

 "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>>",

I suppose I can try pulling them out and placing them in the html like that example

DigitalFusion

Pulling them out worked. The UI isn't as pretty, but at least its working.

Thanks for your help!

kthorngren

I didn't notice you were displaying them with the dom option. I tried a few things but couldn't get the first draw to load the parameters using ajax.data. Even with deferLoading the initial ajax request is setup before the select inputs are placed in the dom. Here is my attempt:
http://live.datatables.net/ruwohuxe/2/edit

I used the setTimeout in initComplete because 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

kthorngren

Maybe this option will work. Build your select inputs into a hidden div. Then in initComplete move the inputs to the dom toolbar. Something like this:
http://live.datatables.net/ruwohuxe/3/edit

Kevin