切换数据表的可见性脚本?

时间:2015-10-02 16:55:18

标签: datatables

我发现这是一个非常简单的脚本,可以根据表格顶部的div中的表格内容动态添加切换按钮,并点击一个点击以切换每个按钮的可见性。我希望在其中添加名称而不是索引号,任何人都可以帮助。

$(document).ready(function() {
var table = $('#example').DataTable();

    // for each column in header add a togglevis button in the div
    $("#example thead th").each( function ( i ) {
        var name = table.column( i ).header();
        var spanelt = document.createElement( "button" );
        spanelt.innerHTML = name.innerHTML;                     

        $(spanelt).addClass("colvistoggle");
        $(spanelt).attr("colidx",i);        // store the column idx on the button

        $(spanelt).on( 'click', function (e) {
            e.preventDefault(); 
            // Get the column API object
            var column = table.column( $(this).attr('colidx') );
             // Toggle the visibility
            column.visible( ! column.visible() );
        });
        $("#colvis").append($(spanelt));
    });
} );
<div id="colvis"></div>
<table id="example" class="display" cellspacing="0" width="100%">
  <thead>
    <!-- here your col header -->
    </thead>
  <tbody>
  <!-- here your table data -->
  </tbody>
</table>

0 个答案:

没有答案