How to hide the filter drop-down to a particular column in Jquery Data Table

beginner_2018

Dear All,

I had used use below code to hide the Input filter drop-down for particular column .But I am finding no luck with it.

Can any one please help me what's wrong with below line

"columnDefs": [ {
"targets": 1,
} ]

https://jsfiddle.net/spspecalist87/heoo51pu/

tangerine

You are not telling DataTables what to do with column 1.

https://datatables.net/reference/option/columns.visible

beginner_2018

Sir,

Please review it in fiddle. On adding the below line loosing the entire data table structure .

 "columnDefs": [
{ "visible": false, "targets": 0 }

]
} );

https://jsfiddle.net/spspecalist87/heoo51pu/13/

kthorngren

You have a syntax error. You can look at the browser's console to see the error and where its at in the code. You have this and need to add a comma:

   "columnDefs": [
    { "visible": false, "targets": 0 }
  ] <<<need to add a comma here
    "dom" : '<"top"iflp<"clear">>rt<"bottom"iflp<"clear">>',

Are you wanting to hide the entire column or just not display a drop down search for the column?

If you don't want to display a drop down search for certain columns you can use column().index() to get the column number and decide whether to build the drop down or not. For example from you code:

                 initComplete: function () {
                     this.api().columns().every(function () {
                         var column = this;

                         if (column.index() !== 0) {  //skip if column 0
                           $(column.header()).append("<br>")
                           var select = $('<select><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>')
                          } );
                       }   //end of if

                    } );
                }

All I added was the if statement and the } ending the if.

Kevin

beginner_2018

Thank you dear ,

I would like to hide the column filter drop-down. But where here it is hiding the entire column

"columnDefs": [
{ "visible": false, "targets": 1 }
],

allan

You need to change the code in the initComplete function in that case. Currently you have this.api().columns().every(function () {, so you could select by only the columns that you want to add the search input into rather than just selecting all columns (which is the default for columns()).

E.g.:

this.api().columns(':gt(1)').every(function () {

Allan

nilakshibhosale

Hello,
In this case if I am generating pdf, then this is including all the options in header.

How to exclude it
https://jsfiddle.net/nilakshibhosale/4skdq2r3/6/

colin

Hi @nilakshibhosale ,

Thanks for sharing, that'll help others!

Cheers,

Colin

ahmfarisi

Admin @allan really help me ... thx for sharing

I directly put the column index here, example (index start with 0)

this.api().columns(1).every( function ()

And if you want more than one column, you can put something like this,

this.api().columns([1,2,3]).every( function ()

r2t2

@nilakshibhosale on your fiddle when you export to the PDF, it is showing the values in the column header. Is there a way to prevent that from happening?

kthorngren

The best way to avoid having the select options show in the export is to use two header rows. You can place the select inputs in the second row and use orderCellsTop to move the sorting to the top row and Datatables will export only the top row. Here is an example:
http://live.datatables.net/saqozowe/2/edit

Kevin