如何遍历 jQuery 数据表中的所有列 headers

Question

我在 Datatables 中使用“fnDrawCallback”来获取所有列 headers 的名称 () 为此，我正在使用下面的代码

"fnDrawCallback": function () {
    table.column().every( function () {
        var data = this.data();
        var title = table.columns().header();

        console.log($(title).html());
    } );

我可以获得第一列的列 header 名称。我想知道如何遍历 table 中的所有列并获取所有 header () 名称？

Answer 1

我知道最简单的方法是在 drawCallback 选项中使用一些 jQuery：

<script type="text/javascript">

  $(document).ready(function() {

    $('#example').DataTable( {

      "drawCallback": function ( settings ) {
        $('#example thead tr th').each(function() {
          console.log( $(this).html() );
        }); 
      }

    } );

  } );

</script>

我使用的是更新的 drawCallback，而不是旧的 fnDrawCallback（但两者都有效）。

请注意：在您的问题中，您使用的是table.column().every( function () {...}。在您的示例中，我看不到您如何定义 table 变量。因此，如果我建议的方法不是 suitable，也许您可以编辑您的问题以显示您使用 fnDrawCallback.

的上下文

更新

如果你想根据列标题的名称隐藏一列或多列，那么你可以把上面的代码修改如下：

<script type="text/javascript">

  $(document).ready(function() {

    $('#example').DataTable( {

      "drawCallback": function ( settings ) {
        var tbl = $('#example').DataTable();

        var colIndex = 0;
        $('#example thead tr th').each(function() {
          var colHeading = $(this).html();
          if (colHeading === 'Office' || colHeading === 'Age') {
            tbl.columns( colIndex ).visible( false );
          }
          colIndex += 1;
        }); 
      }

    } );

  } );

</script>

在上面的示例中，我有一个 table，其中在绘制 table 时隐藏了“Office”和“Age”列。

Answer 2

  var table = $('#contracts').DataTable( {
  

  "drawCallback": function ( settings ) {


                    $('#contracts thead tr th').each(function() {

        // var title = table.column().th();
        // table.column( this ).column;
            
           var head = $(this).text();
                      console.log(head);

       
            if ($(this).text() == "" ) {
                                            console.log("abc");

                                 table.column().visible(false);

                            }

                             else  {
                          
                                  table.column().visible( true );
                        
                          
                  }
        }); 
      }
});

@andrewjames 它按预期工作，但它不会根据条件隐藏列。它只是隐藏了 table

中的第一列

如何遍历 jQuery 数据表中的所有列 headers

How to iterate through all column headers in jQuery Datatables

jquery

iterator

datatables

jquery-datatables-editor

datatables-1.10