Column search (Select inputs) in header not for every column?

Mert1296

Hi everyone,

I just wanted to ask if ist possible to put the select fields not for every column. In the example from DataTables, there is the table columns.each function but I just Need the select Input for 4 Columns..
Can you guys help me out?
Cheeres, Mert

kthorngren

You can use the column-selector to choose the desired columns. Maybe use a class or an array of columns.

Kevin

Mert1296

Ok I used this but it didn't work.. I made an extra row in my thead to put the select fields into my Header and gave the rows which I want to search by options the classname "head".

initComplete: function () {
                            var columns = table.columns('.head');
                            this.api().columns(columns)( function () {
                                var column = this;
                                var select = $('<select><option value=""></option></select>')
                                    .appendTo( $("#table thead tr:eq(1) th").eq(column.index()).empty() )
                                    .on( 'change', function () {
                                        var val = $.fn.dataTable.util.escapeRegex(
                                            $(this).val()
                                        );

                                        column
                                            .search( val ? '^'+val+'$' : '', true, false )
                                            .draw();
                                    } );

                                column.data().unique().sort().each( function ( d, j ) {
                                    select.append( '<option value="'+d+'">'+d+'</option>' );
                                } );
                            } );
                        },

kthorngren

Instead of this:

                            var columns = table.columns('.head');
                            this.api().columns(columns)( function () {

Try this:

                            this.api().columns('.head')( function () {

The var columns contains an API instance which you are trying to pass to columns() in the second line. I don't think this is supported.

Kevin

Mert1296

Tried it, doesn't work. When I'm loading the website my DataTable doesn't load..

kthorngren

Look at the browser's console for errors.

Kevin

Mert1296

So I made a test case here

http://live.datatables.net/saqozowe/69/edit

and the console shows some Errors..

Mert1296

I'm also trying to make the select Inputs without the 2nd row in my thead. Do you know if ist possible like this?

 var select = $('<select><option value=""></option></select>')
                                    .appendTo( $("#table thead tr th").eq(column.index()).empty() )

kthorngren

Thanks for the test case. You had two issues. You didn't have the word every in this line:
this.api().columns('.head').every( function () {

This was causing the error message.

The column class needs to be placed in the top header row since you have orderCellsTop: true,. This is the header row Datatables uses for its functions.

Here is the updated working example with the above changes:
http://live.datatables.net/ruyezofa/1/edit

Kevin

Mert1296

Ok now my select boxex appear! Thank you! But now I have the problem, that the selects are under my thead, means I see the two headers und under them are my select Inputs.. Don't know why

Mert1296

And also when I want to search via select, the select-box disappears after I click on a value..

Mert1296

Ok, found out, that when I'm removing scrollX:true and ScrollY:"100%", that it works propperly. but I need the scrolling