Vfrdtyky

I need to add fields that I created on a page to the Datatables object. So that even though they aren't typical parameters (order, search, pagination, etc.) they can get save and loaded along with the rest of the Datatables object state.

JavaScript:

$(document).ready(function () {

    var table = $('#stackoverflow-datatable').DataTable({

        "processing": true,

        "stateSave": true,

        "stateSaveCallback": function (settings, data) {

            $.ajax({

                "url": "/api/save_state",

                "data": data,

                "dataType": "json",

                "success": function (response) {}

            });

        },

        "stateLoadCallback": function (settings) {

            var o;

            $.ajax({

                "url": "/api/load_state",

                "async": false,

                "dataType": "json",

                "success": function (json) {

                    o = json;

                }

            });

            return o;

        }

    });

});

And then the JS that I thought would add the fields to the object...

<script type="text/javascript">

    $.fn.dataTableExt.afnFiltering.push(

        function (settings, data) {

            var dateStart = parseDateValue($("#dateStart").val());

            var dateEnd = parseDateValue($("#dateEnd").val());

            var evalDate = parseDateValue(data[9]);

            return evalDate >= dateStart && evalDate <= dateEnd;

        }

    );



    function getDate(element) {

        return $.datepicker.parseDate('mm/dd/yy', element.value);

    }



    // Convert mm/dd/yyyy into numeric (ex. 08/12/2010 -> 20100812)

    function parseDateValue(rawDate) {

        var dateArray = rawDate.split("/");

        return dateArray[2] + dateArray[0] + dateArray[1];

    }

</script>

HTML:

<input type="text" id="dateStart" class="datepicker" name="dateStart">

<input type="text" id="dateEnd" class="datepicker" name="dateEnd">



<table id="stackoverflow-datatable">

    <thead>

    <th>ID</th>

    <th>Name</th>

    <th>Date</th>

    </thead>

...

Thanks in advance for your help.

To implement a custom range search, use:

$.fn.dataTable.ext.search.push

To save and load custom state parameters, use:

stateSaveParams: function (settings, data) {}

stateLoadParams: function (settings, data) {}

You must attach event listeners to your datepickers, so that the table is redrawn every time the start or ending dates are changed, but you must also fill in the input fields when the table state is restored. This can be tricky because there's a cross-dependency between the pickers and the table, so I've introduced a custom event to make sure the datepickers state is restored after their creation.

I've created a working example based on your code, using a static table:

JSFIDDLE