如何在colvis代码中添加全部显示和全部隐藏

Question

我从 colvis 那里得到了这段代码。它工作正常。

<script>
$(document).ready( function () {
    var table = $('#record_fpa1').DataTable( {
          "sDom": 'R<"H"lfr>t<"F"ip>',
                    "bJQueryUI": true,
                    "sPaginationType": "full_numbers"
    });
    var colvis = new $.fn.dataTable.ColVis( table );
    $( colvis.button() ).insertAfter('div.info');

});        
</script>

我的问题是我想在上面的代码中添加额外的按钮以显示所有和隐藏所有 colvis 数据 table 但它不起作用。代码如下：

$(document).ready(function() {
    $('#example').DataTable( {
        dom: 'C<"clear">lfrtip',
        columnDefs: [
            { visible: false, targets: 2 }
        ],
        colVis: {
            restore: "Restore",
            showAll: "Show all",
            showNone: "Show none"
        }
    });
});

如何将下面的代码合并到上面的第一个代码中？

colVis: {
    restore: "Restore",
    showAll: "Show all",
    showNone: "Show none"
}

Answer 1

你必须在DataTable的DOM中加上字母C，这个字母指的是show Colvis:

"sDom": 'CR<"H"lfr>t<"F"ip>',

结果：https://jsfiddle.net/cmedina/7kfmyw6x/47/

如何在colvis代码中添加全部显示和全部隐藏

How to add Show All and hide All in colvis code

jquery

jquery-plugins

datatables