Hide select individual column for printing

Arthhur10

Hello guys,

I need your help, I added select in the header but when I want to print my table, I don't want them.

       `initComplete: function () {
            this.api().columns().every( function (i) {
                var column = this;
                var select = $('<select class="' + i + '"><option value=""></option></select>')
                    .appendTo( $(column.header()))
                    .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>' )
                } );
            } );
        },
"dom": 'Bfrtip',
            "fixedHeader":  {
                footer : false
            },
            "autoWidth": false,
            "searching" : true,
            "ordering" : false,
            "paging" : true,
            "buttons": [
                {
                   extend : 'colvis'
                },  
                {
                    extend : 'print', header : false
                },

            ],
            "responsive" : false,`

In my example (with header false), it works but I want the headers without the select.

Can you help me ?

Regards,

colin

Hi @Arthhur10 ,

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

kthorngren

The best option is to use two header rows; one for searching and the other for sorting. The orderCellsTop will be used to define which row is for sorting. My understanding is the export will only export this header row.

Here is an example:
http://live.datatables.net/dikuduka/8/edit

Kevin

Arthhur10

Hi @colin,

live.datatables.net/xarimaye/1/edit

There aren't the buttons colvis and print on the example, I don't know why.
But my problem is when I print this table, I have the select inputs in the header and I want to hide them.

kthorngren

There aren't the buttons colvis and print on the example, I don't know why.

You need to add the Buttons extension JS and CSS files.

But my problem is when I print this table, I have the select inputs in the header and I want to hide them.

As noted in my previous the response the way to do this is to have two header rows and use orderCellsTop. The example I linked to shows how to do this.

Kevin

kthorngren

Ok, I added the print button to my example:
http://live.datatables.net/dikuduka/9/edit

Kevin

Arthhur10

Thanks @kthorngren

My problem is now I want select item instead of search input.
But I can't fill the select with the data from the column.
What is wrong ?

initComplete: function () {
            this.api().columns().every( function (i) {
                var column = this;
                var select = $('<select class="' + i + '"><option value=""></option></select>')
                    .appendTo($(column.header()).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>' )
                });
            } );
 }

It works with the code above but I can't reproduce it.

live.datatables.net/ruciyexo/1/edit

kthorngren

Here is an example with select options:
http://live.datatables.net/saqozowe/70/edit

Note that the second header has the class filterhead which is used to attach the drop down lists.

Kevin

Arthhur10

Thanks a lot @kthorngren