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>

R.Costa · Accepted Answer · 2016-12-10 03:26:37Z

4

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

edited Dec 10, 2016 at 3:26

answered Dec 9, 2016 at 15:30

R.Costa

1,3939 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user633440 Over a year ago

So 'search.push' adds these to the DataTable object? Have you tried going to a different page and coming back to see if it remembers values? Because everything you have in your JSFiddle I'm using and it works perfect for filtering/searching. However, the DataTables search field remembers its values but the added custom fields: startDate, endDate are still not getting added to the "search" area in the Datable output object.

R.Costa Over a year ago

No, you need additional API methods for that. I've updated my answer and my code to include all your requirements. I've tested the script on localhost and the table state, along with the custom fields are preserved.

Collectives™ on Stack Overflow

Adding custom search fields to a DataTable object

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related