Individual column search not finding data

wcaaan

**The datatable is working perfetcly fine including the filter in the top right of datatables, i want to integrate individual column filtering, I have managed to add the search boxes in the footer of each column the search boxes gets triggered but no data has been found althoug the data is present also the global search box in the top right corner also does not filter anything. Can anyone please help me out, thankyou **:

table = $(tableName).DataTable({
            dom: "B<'row'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'fr>>t<'row'<'col-sm-12 col-md-6'i><'col-sm-12 col-md-6'p>>",
            processing: true,
            serverSide: true,
            order: [[1, 'desc']],
            lengthMenu: [[5, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, -1], [5, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, "All"]],
            pageLength: 10,
            autoWidth: false,

            ajax: {
                url: setBaseUrl + '/' + defaultAjaxPostload + '/' + defaultType,
                type: 'get',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                dataSrc: function dataSrc(json)
                {
                    return json.data;
                }
            },

            columns: [
                {data: 'id', name: 'airports.id', title: 'ID'},
                {data: 'title', name: 'airports.title', title: 'TITLE'},
                {data: 'airport', name: 'airports.code', title: 'CODE'},
            ],
            
            initComplete: function () {
                this.api()
                    .columns()
                    .every(function () {
                        var that = this;

                        $('input', this.footer()).on('keyup change clear', function ()
                        {
                            console.log('that.search(): ', that.search());
                            console.log('this.value: ', this.value);

                            if (that.search() !== this.value)
                            {
                                that.search(this.value).draw();
                            }
                        });
                    });
            }
        });
        
        $(tableName).append(
            $('<tfoot/>').append( $(tableName+" thead tr").clone())
        );

        $(tableName+' tfoot th').each(function () {
            var title = $(this).text();
            if(title && title !== 'ACTION')
            {
                $(this).html('<input type="text" class="form-control form-control-sm" placeholder="Search ' + title + '" />');
            }
        });

kthorngren

You have server side processing enabled, ie, serverSide: true,. With server side processing the server script is responsible for searching, sorting and paging. See the SSP protocol docs for more details.

Are you using a Datatables supplied server side processing script? The server script will need to be debugged to determine why its not searching properly.

Kevin

wcaaan

I have set serverSide: false as well, it does not working either. I'm using laravel if there was a problem in the backend the global filter should not working either, when i remove the individual search filters every works.

kthorngren

when i remove the individual search filters every works.

Do you get errors in the console log?

Does it work if you don't move the footer to the header?

Can you post a link to your page or a test case replicating the issue so we can help debug?
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

wcaaan

no console log does not have any error.
no it does not working. let me create a test case. thanks anyway

kthorngren

I think I see the issue. I misunderstood what you are cloning. Looks like you are cloning the thead into the tfoot. You need to build the footer before initializing Datatables, otherwise Datatables will never see it and the this.footer() in $('input', this.footer()).on() won't work. Move lines 48-58 before the Datatables init code.

Kevin

wcaaan

Okay, I have narrowed down the problem, it is not solved but very close, if i take line 48-58 before datatable init my footer does not every generate, the reason is becuase the thead is generated dynamically and it is not hard coded in html. Here is the scenario if i hard code footer in my html my search is working absolutely fine.

<tfoot>
                                        <tr>
                                            <th></th>
                                            <th>ID</th>
                                            <th>TITLE</th>
                                            <th>CODE</th>
                                            <th></th>
                                        </tr>
                                    </tfoot>

The thing is i want this footer dynamically so i changed the code to the following now it does create the footer but second part where i want to inject input in certain columns that does not work. can you please take a look and tell me why ?

            initComplete: function () {
                
                $(tableName).append(
                    $('<tfoot/>').append( $(tableName+" thead tr").clone())
                );
                
                this.api().columns('.individualFilter').every(function () {
                    var column = this;
                    var input = '<input type="text" class="form-control form-control-sm" placeholder="Search" />';
                    $(input)
                        .appendTo($(column.footer()).empty())
                        .on('keyup change clear', function () {
                            console.log('$(this).val(): ', $(this).val());
                            column.search($(this).val(), false, false, true).draw();
                        });
                });
            }

kthorngren

As I said you need to create the footer before initializing Datatables. Or you can use a different selector replacing column.footer(). The footer() api doesn’t exist because the footer doesn’t exist when initing Datatables

Kevin

wcaaan

can you please give me an example of footer initializing before datatables AND use different selector for column.footer() ?

wcaaan

Okay, solved this is how i create the footer before Datatable initialization. It working now.

var footer = $("<tfoot></tfoot>").appendTo(tableName);
        var footerTr = $("<tr></tr>").appendTo(footer);
        for (var i = 0; i < originalColumns.length; i++) {
            if(i == 0 || originalColumns.length-1)
            {
                $("<th></th>").appendTo(footerTr);
            }
            else
            {
                $("<th>"+originalColumns.title+"</th>").appendTo(footerTr);
            }
        }

I really appreciate your help @kthorngren Thankyou and bless you