前提

在做後臺系統時，大多數是一些資料的展示，而有些時候，列表資料太多，不一定是使用者想要看到的資料，就需要做一個列 顯示/隱藏的功能

功能實現

第一種方法：此方法實用於使用整套的datatable，就是說在實現顯示/隱藏功能的同時，必須利用他的外掛自動生成分頁，自動搜尋，排序等功能，就是全家福一樣，全部推送給你這裡只貼出顯示/隱藏列的程式碼，

1. 第一步

<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet" />
<link
 
 href="https://cdn.datatables.net/buttons/1.5.0/css/buttons.dataTables.min.css" rel="stylesheet" />
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.0/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.0/js/buttons.colVis.min.js"
 
></script>

引入以上五個datatable外掛

2： 程式碼 

$('.table-sort').dataTable().fnDestroy();//注意這句話，作用是在翻頁的時候，需要將先前實用datatable生成的table摧毀，以便在翻頁或者條件查詢的時候，新的表格的搭建。
$('.table-sort').DataTable( { 
            dom: 'Bit',
            paging: false,
            "info": false,
            "searching": false,   
            "ordering"
 
: false,
            "stateSave": true,
            buttons: [
                'colvis'
            ]
        } );  

3：程式碼解釋
dom: ‘Bit’,表示排序 搜尋 分頁表格等等出現的順序
paging: false,表示不分頁
“searching”: false,表示不分頁
“ordering”: false,表示不排序
“stateSave”: true,是否儲存在cookie中（就是一次使用者不想看到這一列，下次登入的時候還是不會出現這個列，是永久儲存的）
上面的引數可以設定只顯示顯示/隱藏列的按鈕，唯一的許可權就是樣式無法調整。

第二種方法：這個方法相對自己動手的地方要多一些，只是藉助的外掛的一個隱藏列的功能
1、第一步：

<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>

引入datatable外掛 只需要這一個，沒有引入css的原因是因為，他會自動生成其他的一些表格樣式，影響原來的樣式
2、第二步：

var isInitFilterSelect=false;
    function initFilterSelect(){
        var str='';
        var tableTh=$("#tableList").find("thead").find("th");

        for(var i=0;i<tableTh.length;i++){//<i class="Hui-iconfont">&#xe6a7;</i>
            str+=' <li style="padding:3px 15px;cursor:pointer;" class="toggle-vis" data-column="'+i+'"><input type="checkbox" checked="checked" disabled="disabled"/>'+$("#tableList").find("thead").find("th").eq(i).html()+'</li>'
        } 

        $("#tableSelect").html(str); 

        isInitFilterSelect=true;
    }

初始化一個列下拉框，說白了就是，你有一個列表，你得先獲取這些列，然後將這些列以下拉框的形式顯示吧，直接上圖吧。上面這段程式碼只是獲取列表中所有列，並且生成下拉框的程式碼，其他程式碼自己進行腦補。

3、第三步：
初始化這個列表，並且初始化點選事件

var table = $('#tableList').DataTable({
                    "paging": false,
                    //"stateSave": true,
                    "info": false,
                    "searching": false,   
                    "ordering": false
                } );  

            initFilterSelect();//這個方法是初始化下拉框使用的
     $("#tableSelect").find('.toggle-vis').on( 'click', function (e) {    
             var input=$("#tableSelect").find("input");
             var inputCheckedCount=0;//一個列表有n個列，不可能讓所有的列都消失，會出問題，所以當出現只有一個列顯示的時候，這個下拉選擇框不可以選
    for(var i=0;i<input.length;i++){                        if($("#tableSelect").find("input").eq(i).prop("checked")==true){
                          inputCheckedCount++;
                     }
     }    
        var column = table.column( $(this).attr('data-column'));
 if(inputCheckedCount>1||($(this).find("input").prop("checked")==false)){
             e.preventDefault(); 
          column.visible( ! column.visible());                  
            $("#tableList").css("width","100%");
 if(!column.visible()){                                 $(this).find("input").prop("checked",false);  
}else{                              $(this).find("input").prop("checked",true); 
    }                   
     }
     } ); 

程式碼貼出來有點亂，大家複製過去格式化一下再看吧。
說說最主要的一個方法吧，也是用到這個外掛唯一的方法
var column = table.column( $(this).attr(‘data-column’));
//這句話獲取的是當前點選的下拉選擇框中的一個對應的列，
column.visible( ! column.visible());
// column.visible（boolean），boolean是true表示顯示這列，相反不顯示
第二鍾方法只是實現了當前列表的顯示/隱藏，沒有實現翻頁以後記住這些選擇的功能，
當然有一個”stateSave”: true,這個引數，可以設定將這些選擇記住到cookie，但是存在問題，主要問題是在獲取下拉框資料的時候，存在於列表資料對不上的情況，具體的網友們大家自行測試吧。