JSFiddle - React, Tailwind, and code Playground
HTML
<h1>List of Records</h1>
<hr/>
<form id="search-form">
<label for="max">Max Date:</label>
<input type="text" name="max" id="max">
<label for="min">Min Date:</label>
<input type="text" name="min" id="min">
<input type = "submit" value = "Submit" >
</form>
<table class="table table-bordered dataTable dt-bootstrap" id="users-table">
<thead>
<tr>
<th>email_address</th>
<th>serial_number</th>
<th>first_name</th>
<th>last_name</th>
<th>track_id</th>
<th>order_number</th>
<th>created_at</th>
</tr>
</thead>
<tfoot>
<tr id="filterrow">
<th>email_address</th>
<th>serial_number</th>
<th>first_name</th>
<th>last_name</th>
<th>track_id</th>
<th>order_number</th>
<th>created_at</th>
</tr>
</tfoot>
</table>
CSS
public function anyData(\Illuminate\Http\Request $request)
{
$emails = Email::select(['serial_number', 'track_id', 'order_number', 'email_address', 'first_name', 'last_name','created_at'])->get();
//
return Datatables::of($emails)
->filter(function ($instance) use ($request) {
if ($request->has('serial_number')) {
$instance->collection = $instance->collection->filter(function ($row) use ($request) {
return Str::contains($row['serial_number'], $request->get('serial_number')) ? true : false;
});
}
if ($request->has('track_id')) {
$instance->collection = $instance->collection->filter(function ($row) use ($request) {
return Str::contains($row['track_id'], $request->get('track_id')) ? true : false;
});
}
if ($request->has('order_number')) {
$instance->collection = $instance->collection->filter(function ($row) use ($request) {
return Str::contains($row['order_number'], $request->get('order_number')) ? true : false;
});
}
if ($request->has('email_address')) {
$instance->collection = $instance->collection->filter(function ($row) use ($request) {
return Str::contains($row['email_address'], $request->get('email_address')) ? true : false;
});
}
if ($request->has('first_name')) {
$instance->collection = $instance->collection->filter(function ($row) use ($request) {
return Str::contains($row['first_name'], $request->get('first_name')) ? true : false;
});
}
if ($request->has('last_name')) {
$instance->collection = $instance->collection->filter(function ($row) use ($request) {
return Str::contains($row['last_name'], $request->get('last_name')) ? true : false;
});
}
})
->make(true);
}
JavaScript
<script>
new Pikaday({ field: $('#max')[0], format: 'YYYY-MM-DD 23:59:59' });
new Pikaday({ field: $('#min')[0], format: 'YYYY-MM-DD 00:00:00' });
$(document).ready(function() {
//Creating the data table and populating it with database information
var table = $('#users-table').DataTable({
dom: 'Bfrtip',
processing: true,
serverSide: true,
ajax: {
url: '{!! route('datatables.data') !!}',
data: function (d) {
d.minDate = $('#min').val();
d.maxDate = $('#max').val();
},
},
{{--ajax: '{!! route('datatables.data') !!}',--}}
{{--data: function (d) {--}}
// d.minDate = $('#min').val();
// d.maxDate = $('#max').val();
{{--},--}}
columns: [
{data: 'email_address', name: 'email_address'},
{data: 'serial_number', name: 'serial_number'},
{data: 'first_name', name: 'first_name'},
{data: 'last_name', name: 'last_name'},
{data: 'track_id', name: 'track_id'},
{data: 'order_number', name: 'order_number'},
{data: 'created_at', name: 'created_at'}
],
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
]
});
// Setup - add a text input to each footer cell
$('#users-table tfoot tr#filterrow th').each(function () {
var title = $('#users-table tfoot th').eq($(this).index()).text();
$(this).html('<input type="text" onclick="stopPropagation(event);" placeholder="Search '+title+'" />' );
});
// Apply the user filter
...