Adding custom search fields to a DataTable object

Question

I need to add fields that I created on a page to a DataTable object. 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 JavaScript that I thought would add the fields to the object is the following.

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

Answer 1

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