jquery.dataTables实现table自定义列显示隐藏

"en">

    "UTF-8">
    
    "stylesheet" href="style/css/jquery.dataTables.min.css">
    "https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    
    
    
    


"exampleBox" class="exampleBox">
    "button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
        class="fa fa-th icon-th">
        class="caret">自定义列
    
    
class="dropdown-menu" role="menu">
        
"0">
            "0" type="checkbox" data-field="Name" checked="checked" disabled> 姓名
        
"1">
            "1" type="checkbox" data-field="Position" checked="checked" disabled>地址
        
"2">
            "checkbox" data-field="Office" data-column="2">办公室
        
"3">
            "checkbox" data-field="Age" data-column="3"  checked="checked"> 年龄
        
"4">
            "4" type="checkbox" data-field="StartDate">日期
        
        
"5">
            "5" type="checkbox" data-field="Salary" checked="checked"> Salary
        
    
    "example"class="display">
        
 

        

            
姓名
            
地址
            
办公室
            
年龄
            
日期
            
Salary
        
        
        

        

            
Tatyana Fitzpatrick
            
Regional Director
            
London
            
19
            
2010/03/17
            
$385,750
        
        

            
Michael Silva
            
Marketing Designer
            
London
            
66
            
2012/11/27
            
$198,500

        
        

            
Paul Byrd
            
Chief Financial Officer (CFO)
            
New York
            
64
            
2010/06/09
            
$725,000
        
        
    

注意：

　　1、至少保证两列是一定显示的，否则点击切换的时候有可能乱套。

　　2、columnDefs字段可默认隐藏列，但是注意对应的下拉选项要设置未选中，否则也乱套的。

　　　　"columnDefs": [
            {
                "targets": [2,4], // 默认隐藏的列：下标为2和4
                "visible": false,
            }
        ]

实现效果：