如何在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 数据表，但它不起作用。代码如下：

$(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/