4

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.

Ravi
  • 195
  • 15
  • 1
    Do you have `tfoot` element in your HTML markup? See [this example](https://datatables.net/examples/api/multi_filter.html). – Gyrocode.com Dec 29 '18 at 01:48
  • The HTML I had, did not have any tfoot element. Adding that fixed the problem. The footer shows up now and the column filter search also works. Thanks for pointing out. – Ravi Dec 29 '18 at 04:14

1 Answers1

9

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>

Ravi
  • 195
  • 15