利用datatable实现 列的 显示/隐藏

前提

在做后台系统时，大多数是一些数据的展示，而有些时候，列表数据太多，不一定是用户想要看到的数据，就需要做一个列 显示/隐藏的功能

功能实现

第一种方法：此方法实用于使用整套的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，但是存在问题，主要问题是在获取下拉框数据的时候，存在于列表数据对不上的情况，具体的网友们大家自行测试吧。