Column search with filter in footer - footer filter not showing - Laravel Datatables Yajrabox

Question

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 1

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>