Search on specific columns doesn't work why?

rhayve92

Hi,

I have problem with searching for specific columns. Whenever the user inputs in the column search field it is also inputting on the general 'Search' field.

below is my code:

getFormalQuotes(obj) {

        if (this.props.formalquote_list.length > 0) {
            if ($.fn.DataTable.isDataTable('#formalquote-table')) {
                this.props.formalquote_list.empty();
                this.props.formalquote_table.DataTable().clear().destroy();
            }
        }

        this.props.formalquote_table.DataTable({
            ajax: {
                url: obj.url,
                type: obj.type,
                beforeSend: (xhr) => {
                    xhr.setRequestHeader('Authorization', 'Bearer ' + obj.token);
                    xhr.setRequestHeader('Accept', obj.dataType);
                },
                dataSrc: ""
            },
            columns: [
                {data: 'quote_type'},
                {data: 'insurer_name'},
                {data: 'section_name'},
                {data: 'policy_wording'},
                {data: 'created_at'},
                {data: 'updated_at'},
                {data: 'id'},

            ],
            columnDefs: [
                {
                    targets: [6],
                    data: 'id',
                    render: (data, type, row, meta) => {
                        return "<a class='btn btn-sm btn-primary btn-download-formalquote fa fa-download text-white' data-id='" + data + "' role='button' download></a>"
                            + "<a class='btn btn-sm btn-warning btn-edit-formalquote fa fa-pencil' data-id='" + data + "' role='button'></a>" +
                            "<a class='btn btn-sm btn-danger btn-delete-formalquote fa fa-trash text-white' data-id='" + data + "' role='button'></a>";
                    }
                }
            ],

            initComplete: (settings, json) => {
                let api = settings.oInstance.api();
            
                   api.columns().every((colIdx) => {
                        $('.formal-filter', api.column(colIdx).footer()).on('keyup change clear', (evt) => {
                            if (api.search() !== $(evt.target).val()) {
                                api
                                    .search($(evt.target).val())
                                    .draw();
                            }
                        });
                    });

            }

        });
    }

colin

That's because you're not doing a column search, which would be column().search(). You're doing a global search (search()), so the search box will reflect the search that's being applied.

Colin

rhayve92

Hi Colin I tried using column().search() it does not work as well it does not show any result.

rhayve92

rhayve92

I think this has something to do with the scope of 'this'. In which 'this' refers to my class.

kthorngren

Please provide a running test case showing the issue so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

rhayve92

Hi

I'll close this thanks! This one is solved.