Integrate datepicker to display datatable records between date range

Lara20

I have a datatable with lots of records. I load the data via AJAX. I use "serverSide": false. You can order by columns and I have dropdown filters on the bottom of the table. I now tried to include a datepicker and followed the instructions on this page https://makitweb.com/date-range-search-in-datatable-with-jquery-ajax-and-php/
It works when I set "serverSide": true, but then none of my filters work and each time I click on a column for sorting it does another AJAX request, but they dont actually work which makes sense since I do not use that information on the server. How can I achieve what I want to do? Can I force it to just do server side for the date column and if so, how is that done?

kthorngren

Looks like the example you linked to uses server side processing. If you want to use a range search with client side processing you will need to add a Search Plugin. You can see a running number range search example here.

Here is a pre-built date range plugin:
https://datatables.net/plug-ins/filtering/row-based/range_dates

In your datepicker event use draw() for the plugin to run and in the plugin get the input values.

This thread has another example you can try.

If you have difficulties implementing the plugin please provide a link to your page or create test case showing what you are doing so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

Lara20

Hi Kevin, Thank you very much for your help. So am I assuming right that i cant have 1 column to be server side processing, while the rest is client side processing?

They will heavily use the date range, but then they also use heavily the dropdown filter and it would be a lot of work to re-write the DB queries for all the filters.

If I could somehow just manage to do another ajax request when a date is selected and then re-draw the table, but I also have lots of manipulation in the render function of the datatable columns so I dont want to duplicate the whole datatable in a on click() search date btn. I hope you understand what I have in mind. do you think this would be possible somehow?

kthorngren

The Datatable can be either server side processing or client side but not a combination of both. In either mode you can use ajax.data as a function to fetch the datepicker input values and send as parameters to the server for filtering the ajax response. In your datepicker event handler use ajax.reload() to refresh the table.

Kevin

Lara20

That's a shame. I think I have done a workaround in the past where I have the default datatable with a default date. Then I have a duplicated datatable setup when a different date is selected and which wipes the first datatable and draws the datatable again. Pretty horrible but it worked. I was just wondering if there is a better way if all I want is to be able to change the date range, do a new ajax request to get the updated records, but use all the client side filtering. It sounds so much work, if I have to send all the columns which have a filter over to my Controller and from there to my query in the repository just because I want to be able to request records only for a specific date range to cut down on the records.

kthorngren

I was just wondering if there is a better way if all I want is to be able to change the date range, do a new ajax request to get the updated records, but use all the client side filtering.

Yes you can do that. Let me try to explain again. You can use ajax to fetch your data without enabling server side processing. This allows for using client side filtering.

If you want to use client side filtering with a date range then you will need to create a Search Plugin.

However if, instead, you want to use the data picker to fetch a dataset for the selected date range then use ajax.data as a function to get the datapicker inputs and send as parameters to your server script. You can still use client side filtering for everything else.

Does this help?

Kevin