Column Search With Filter In Footer - Footer Filter Not Showing - Laravel Datatables Yajrabox
I am using Yajrabox Laravel datatables to display data. Very simple, just trying what is given in the tutorial. However, the text boxes to take input in the footer of the table is not showing up.
https://datatables.yajrabox.com/eloquent/multi-filter-select
Using the same code that is there in the page - source code.
$('#users-table').DataTable({
processing: true,
serverSide: true,
ajax: 'https://datatables.yajrabox.com/eloquent/multi-filter-select-data',
columns: [
{data: 'id', name: 'id'},
{data: 'name', name: 'name'},
{data: 'email', name: 'email'},
{data: 'created_at', name: 'created_at'},
{data: 'updated_at', name: 'updated_at'}
],
initComplete: function () {
this.api().columns().every(function () {
var column = this;
var input = document.createElement("input");
$(input).appendTo($(column.footer()).empty())
.on('change', function () {
column.search($(this).val(), false, false, true).draw();
});
});
}
});
The datatable shows as expected, with the columns and the data, sorting and the search feature on top of the table.
However, Footer does not show the filter box, whereas the filter box should be showing up as given in the example.
I am not sure what I am missing. If someone can point me in the right direction, it would be helpful.
Answer
Thanks @Gyrocode for pointing out about the tfoot. My table did not have the element. I had to add that and then the footer started showing up with the column filter.
Sample code is here for anyone who might have a similar problem.
<table id="users-table" class="table table-condensed">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Email</th>
<th>Created At</th>
<th>Updated At</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Id</th>
<th>Name</th>
<th>Email</th>
<th>Created At</th>
<th>Updated At</th>
</tr>
</tfoot>
Related Questions
- → "failed to open stream" error when executing "migrate:make"
- → October CMS Plugin Routes.php not registering
- → OctoberCMS Migrate Table
- → OctoberCMS Rain User plugin not working or redirecting
- → October CMS Custom Mail Layout
- → October CMS - How to correctly route
- → October CMS - Conditionally Load a Different Page
- → Make a Laravel collection into angular array (octobercms)
- → In OctoberCMS how do you find the hint path?
- → How to register middlewares in OctoberCMS plugin?
- → Validating fileupload(image Dimensions) in Backend Octobercms
- → OctoberCMS Fileupload completely destroys my backend
- → How do I call the value from another backed page form and use it on a component in OctoberCms