jQuery dataTables如何隐藏列？

Question

我希望在 jQuery DataTables 中隐藏一个包含Geo Zone的th列。以下是我的操作：

$(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);
     }
        }
    });

数据表已加载，但列未被隐藏。 在此之前，我尝试在表格呈现时隐藏它，这样做效果很好。然后我所做的是：

 "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);
                           }
                       }
                       },

但它存在一个问题，即在表格加载时显示隐藏的列。为了避免这个问题，我使用了先前提到的解决方案。但是尽管我得到了正确的索引，它仍然无效。它没有报错。

- Haris

---

“Not working” 是描述错误的一种非常笼统的方式，您能否更清楚地表达自己？ - Icepickle

@Icepickle，我应该如何详细说明呢？只是这一列没有被隐藏，虽然我有datatable对象、列索引，并且我使用它们都是正确的，我还需要解释什么？ - Haris

你是否有意显示那一列？如果不需要的话，为什么还要绘制它呢？ - bluehipy

我打算这样做。如果 geo_zone_on_off 被设置为 1，我打算将其显示出来。@bluehipy - Haris

那我觉得现在是时候制作一个 MVCE 了，因为这个讨论只有最小化的代码将带我们走到死路。仅凭如此少量的代码根本无法判断问题出在哪里。 - Icepickle

Answer 1

不必过于复杂，只需给该列命名即可。而且为什么不在初始化时设置visible状态呢？

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

然后，稍后您可以通过引用列名来更改可见性：

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

或者

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

请查看列选择器 -> https://datatables.net/reference/type/column-selector

- davidkonrad

---

问题是当数据表正在加载时，隐藏列会显示出来。 @davidkonrad - Haris

@匿名，如果您在columnDefs或columns中设置了visible: false，则不会显示。 - davidkonrad

Answer 2

获取Datatable对象

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

获取列目标以改变可见性

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

修改可见性。

column.visible( false );

DataTable文档

- Aman

Answer 3

你想要隐藏一个包含地理区域的列。

可以尝试类似以下的代码：

$('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();
            }
          });
         });
        }
      });
    });

请查看演示

- Prasanna Venkatesh