javascript - Hide column in jQuery dataTables? - Stack Overflow

admin管理员组

文章数量:1314086

I want to hide a column in jQuery DataTables that contains Geo Zone in its th. This is what I am doing :

$(document).ready(function(){

        if(geo_zone_on_off==0){
            var _index=$("#datatable_ajax .heading th:contains(GeoZone)").index();
            var oTable=$("#datatable_ajax").DataTable();
            if(_index != -1){
                 oTable.column(_index).visible(false);
     }
        }
    });

The dataTable is loaded but the column does not get hidden. Before doing this I tried to hide it when the table was rendered and it worked fine. What I did then was:

 "initComplete": function(settings, json) {
                       if(geo_zone_on_off==0){
                        var _index=$("th.sorting:contains(GeoZone),th.no-sort:contains(GeoZone)").index();

                           if(_index != -1){
                             grid.getDataTable().column(_index).visible(false);
                           }
                       }
                       },

But it had a problem that it displayed the hidden columns when the table was loading. In order to avoid that issue I used the solution mentioned first. But it is not working although I am getting the index right. It does not give any error.

I want to hide a column in jQuery DataTables that contains Geo Zone in its th. This is what I am doing :

$(document).ready(function(){

        if(geo_zone_on_off==0){
            var _index=$("#datatable_ajax .heading th:contains(GeoZone)").index();
            var oTable=$("#datatable_ajax").DataTable();
            if(_index != -1){
                 oTable.column(_index).visible(false);
     }
        }
    });

The dataTable is loaded but the column does not get hidden. Before doing this I tried to hide it when the table was rendered and it worked fine. What I did then was:

 "initComplete": function(settings, json) {
                       if(geo_zone_on_off==0){
                        var _index=$("th.sorting:contains(GeoZone),th.no-sort:contains(GeoZone)").index();

                           if(_index != -1){
                             grid.getDataTable().column(_index).visible(false);
                           }
                       }
                       },

But it had a problem that it displayed the hidden columns when the table was loading. In order to avoid that issue I used the solution mentioned first. But it is not working although I am getting the index right. It does not give any error.

• javascript
• jquery
• datatables

Share Improve this question Follow edited Aug 17, 2017 at 13:56 davidkonrad 85.6k1717 gold badges209209 silver badges271271 bronze badges asked Aug 17, 2017 at 11:05 HarisHaris 76344 gold badges1010 silver badges2727 bronze badges 16

• 1 Not working is such a general way of describing an error, can you express yourself more clearly? – Icepickle Commented Aug 17, 2017 at 11:08
• 1 @Icepickle how should I elaborate it ? The column is not getting hidden thats all, though I have datatable object, column index and I am using them all right what more should I explain? – Haris Commented Aug 17, 2017 at 11:10
• Do you ever intend to show that column? if not why drawing it at all? – bluehipy Commented Aug 17, 2017 at 11:11
• I intend to. If geo_zone_on_off is set to 1 I intend to display it. @bluehipy – Haris Commented Aug 17, 2017 at 11:13
• 1 I would say then it is time to produce an MVCE, as this discussion with minimalistic code will bring us nowhere. There simply isn't enough code to decide what is wrong – Icepickle Commented Aug 17, 2017 at 12:08

 |  Show 11 more ments

3 Answers 3

Sorted by: Reset to default 2

It dont have to be so plicated. Simply give the column a name. And why not set the visible status upon initialization? :

columnDefs: [
  { targets: <index>, name: 'geozone', visible: geo_zone_on_off == 1 }
]

Then, later on, you can change the visibility by refer to the columns name :

table.column('geozone:name').visible(false);

or

table.column('geozone:name').visible( geo_zone_on_off == 1 );

Look at column selectors -> https://datatables/reference/type/column-selector

Get Datatable object

var table = $('#table').DataTable();

Get column target to alter visibility

var target = //Get target of column to hide for eg for third column target = 2
var column = table.column( target );

Alter visibility

column.visible( false );

DataTable Documentation

You want to hide a column which contains Geo Zone in th.

Try something like this

$('table').DataTable();
    $('button').on('click',function(){
        $('th').each(function(i,e){
        if($(this).text()=='No') {
         $(this).hide();
         $('tr').each(function(){
          $(this).find('td').each(function(index,element){
            if(index==i) {
              $(this).hide();
            }
          });
         });
        }
      });
    });

See the demo

本文标签： javascriptHide column in jQuery dataTablesStack Overflow