Search

There's a table. We need to make a selection by date. But if you enter for example min Apr 4, 2025 and max Apr 4, 2025 data is not displayed at all - no data. To view Apr 4, 2025 it is necessary to enter min Apr 3, 2025 and max Apr 4, 2025. Where is my trick? Everything works fine in the example. $(document).ready(function () { var hearing_array = 'ajax/data_array'; var table = $('#table-list').DataTable({ "autoWidth": false, "order": [[1, 'asc']], 'ajax': hearing_array, "deferRender": true, columnDefs: [{ targets: 1, render: DataTable.render.datetime('MMM DD, YYYY') }], "columns": [ {"data": "id", "visible": false, "searchable": false}, {"data": "date", "width": "5%"}, {"data": "earliest"}, {"data": "earliest_dismissal"}, { "data": null, "width": "3%", "targets": -1, "defaultContent": " ", "visible": false }, {"data": "manual_processing_required", "visible": false} ], }) let minDate, maxDate; DataTable.ext.search.push(function (settings, data, dataIndex) { let min = minDate.val(); let max = maxDate.val(); let date = new Date(data[1]); if ( (min === null && max === null) || (min === null && date <= max) || (min <= date && max === null) || (min <= date && date <= max) ) { return true; } return false; }); minDate = new DateTime('#min', { format: 'MMM DD, YYYY' }); maxDate = new DateTime('#max', { format: 'MMM DD, YYYY' }); document.querySelectorAll('#min, #max').forEach((el) => { el.addEventListener('change', () => table.draw()); }); } ); Please pardon me for showing screenshots. If 03 April to 03 April - no data If 02 April to 03 April - then the data for 03 April Any thoughts would be appreciated.

Thank you Kevin, the first solution works well.

See this example. Kevin

load works great but filters don't work. The server

to 2. For column filtering I have cloned the

It would be helpful if you filled in the text with a bit more of a description of what you want to do. Is it like this but with multiple for the select elements? Have you taken a look at SearchPanes? Allan

Datatables doesn't have anything built-in for that interface. I don't know of any examples but I remember other threads asking something similar. You might be able to find them to see if there are examples. It will require custom coding. Click events will need to be created for each function you want to support. In the event handlers use Datatable APIs like column().order() and column().search() to perform the actions. This example shows how to add column searches using column().search(). Kevin

Thanks lads!

If you don't ever want to show those rows then the best option is to remove them from the props.props array before initializing Datatables. If you want them in the Datatables but not displayed you can use column().search.fixed(). Provide the user the ability to set/reset a flag to display blank names and check the flag in the column().search.fixed() function to determine if blank names should be shown. To answer your question you would use clear() then rows.add() to clear the original data and update the table with the filteredData. This would be the less efficient than just removing the unwanted data before initializing Datatables. Kevin

Thanks! I renamed the title property and it's working as expected now.