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

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

beginner_2018beginner_2018 Posts: 46Questions: 19Answers: 0

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/

This question has an accepted answers - jump to answer

Answers

  • tangerinetangerine Posts: 3,342Questions: 35Answers: 394

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

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

  • beginner_2018beginner_2018 Posts: 46Questions: 19Answers: 0

    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/

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    edited March 2018 Answer ✓

    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_2018beginner_2018 Posts: 46Questions: 19Answers: 0
    edited March 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 }
    ],

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

  • nilakshibhosalenilakshibhosale Posts: 7Questions: 2Answers: 0

    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/

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    Hi @nilakshibhosale ,

    Thanks for sharing, that'll help others!

    Cheers,

    Colin

  • ahmfarisiahmfarisi Posts: 1Questions: 0Answers: 0
    edited January 2020

    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 ()

  • r2t2r2t2 Posts: 1Questions: 0Answers: 0

    @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?

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    edited October 2020

    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

This discussion has been closed.