Implement daterange filter with serverside processing in Yajra Laravel datatables - laravel

Question

I have an invoices table, which uses the Yajra Laravel data table. I want to filter data using 'created_at' column, which does exists in invoices table in the database but not in the table view.
Here is my datatable image:
And the code which take start and end dates:
$(function() {
$('#invoices_daterange').daterangepicker({
opens: 'left'
}, function(start, end, label) {
console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
});
});
Here is my datatabe JS code
$(function () {
let invoicedatatable = $('#invoicesdatable-table').DataTable({
pageLength: 100,
processing: true,
serverSide: true,
ajax: '{{ route('invoices.datatable') }}',
columns: [
{data: 'invoice_number', name: 'invoice_number'},
{data: 'partner', name: 'partner.full_name'},
{data: 'start', name: 'start'},
{data: 'end', name: 'end'},
{data: 'due', name: 'due'},
{data: 'actual_invoice_amount', name: 'actual_invoice_amount'},
{data: 'action', name: 'action', sortable: false, searchable: false},
],
lengthMenu: [
[10, 50, 100, 250, 3000, 5000],
[10, 50, 100, 250, 3000, 5000]
],
buttons: [{
extend: 'colvis',
text: '<i class="icon-three-bars"></i>',
className: 'btn bg-blue btn-icon dropdown-toggle'
}]
});
});
I did search and read most of the topics about it, but couldn't find anything to implement this.
What I want to do:
is to filter data using the 'created_at' column which is not in the view, but exists in my invoices table in the database.
How to do it?

Answer 1

I am not familiar with your datepicker widget, so I cannot use that in my example. But I think you should be able to adapt the following to use your datepicker.
In my example, I have two separate date fields ("from" and "to") in a form, with a "submit" button:
<div>
<form id="filter-form">
From:<input type="date" id="min-date" name="min-date">
To:<input type="date" id="max-date" name="max-date">
<input type="submit" value="Submit">
</form>
</div>
You don't need to use a form (I used a form here, because it is a simple demo).
In the page's script (the same place where the DataTable is defined), I add a "submit" function:
var url = '{{ route('invoices.datatable') }}';
$( "#filter-form" ).submit(function( event ) {
event.preventDefault();
invoicedatatable.ajax.url( url ).load();
});
I don't actually need to submit the form, so I disable the default submission using event.preventDefault();.
The line invoicedatatable.ajax.url( url ).load(); is explained below.
In my DataTable I change the basic Ajax call from this:
ajax: '{{ route('invoices.datatable') }}',
to this:
ajax: {
url: url,
type: "POST", // or 'GET' if you prefer
data: function (data) {
data.mindate = $('#min-date').val();
data.maxdate = $('#max-date').val();
}
},
This uses a DataTables function to manipulate the data option. This is the data which we will send to the server, as part of our server-side request.
I simply append two new variables to the existing data - mindate and maxdate. These contain the date range you need to use in the server, for filtering.
Note that the data variable passed into the function already contains some data, provided by DataTables for server-side processing. So, I am adding these two extra fields to that existing data.
The request sent from the browser to the server now looks like this. You can see mindate and maxdate at the bottom of the list:
{
"draw": "2",
"columns[0][data]": "id",
"columns[0][name]": "",
"columns[0][searchable]": "true",
"columns[0][orderable]": "true",
"columns[0][search][value]": "",
"columns[0][search][regex]": "false",
"columns[1][data]": "name",
"columns[1][name]": "",
"columns[1][searchable]": "true",
"columns[1][orderable]": "true",
"columns[1][search][value]": "",
"columns[1][search][regex]": "false",
... not all details shown
"order[0][column]": "0",
"order[0][dir]": "asc",
"start": "0",
"length": "10",
"search[value]": "",
"search[regex]": "false",
"mindate": "2021-06-08", // <--- mindate
"maxdate": "2021-06-16" // <--- maxdate
}
In the form submission event, there was this line:
invoicedatatable.ajax.url( url ).load();
This line causes the ajax call in the DataTable to be re-executed, and the table to be re-drawn. This is the trigger which causes the dates to be sent to the server, as part of a standard request. It's the same action as when a user clicks on a column to sort the data, or moves from one page to another page in the DataTable.
The server can process this request and extract the two date fields from the request, in the usual way. It can then use these values to filter the data, before building its response, to send back to the DataTable.