Search table with input fields in cells

alzambo

Hi,

following this example, how can apply a search filter to columns with input field (Age and Position)?

Thank you,
Alex

allan

Hi Alex,

You would need to implement a custom search plug-in.

Allan

alzambo

Hi Alan and thank you for your answer.
I'm testing it and cannot access values of input fields in column 9

        $('input[name=filterNumeroFattura]').on('keyup', function() {
            $.fn.dataTable.ext.search.push(function(settings, data, dataIndex) {
                console.log(data[9]);
                return false;
            });
            table.draw();
            $.fn.dataTable.ext.search.pop();
        });

data[9] returns always empty value.
How can I access it?

allan

Try something along the lines of:

var dtApi = null;

$.fn.dataTable.ext.search.push(function(settings, data, dataIndex) {
        if ( ! dtApi ) {
                dtApi = new $.fn.dataTable.Api( settings );
        }

        console.log( dtApi.row( dataIndex ).node() );
        return false;
});

$('input[name=filterNumeroFattura]').on('keyup', function() {
    table.draw();
});

I would suggest not adding a new filter to the array on every key press - although the push / pop was a clever way of doing it. But it wouldn't be present if your user sorted the table for example.

The dtApi variable is used to access the DataTables API, and I've stored it in a variable so it doesn't need to be created on every single filter call.

Allan