Aside from doing indexes, and use join() instead of with(). This example uses the DataTables library.

<link rel= "stylesheet" href= "https://cdn.datatables.net/2.3.7/css/dataTables.dataTables.css" /> <script src= "https://cdn.datatables.net/2.3.7/js/dataTables.js" ></script>

Enter fullscreen mode

Exit fullscreen mode

1. Route

Route :: post ( '/data' , [ App\Http\Controllers\MyController :: class , 'datatable' ]) -> name ( 'mydata.datatable' );

Enter fullscreen mode

Exit fullscreen mode

2. View

Date input, datatable, and button.

<div class= "mb-4 form-group col-lg-4" > <label class= "form-label" > Start Date </label> <input type= "text" name= "start_date" id= "start_date" class= "form-control" required > </div> <div class= "mb-4 form-group col-lg-4" > <label class= "form-label" > End Date </label> <input type= "text" name= "end_date" id= "end_date" class= "form-control" required > </div> <div class= "mb-4 form-group col-lg-4" > <button class= "btn btn-sm btn-light-primary font-weight-bold" id=…