前提
在做后台系统时,大多数是一些数据的展示,而有些时候,列表数据太多,不一定是用户想要看到的数据,就需要做一个列 显示/隐藏的功能
功能实现
第一种方法:此方法实用于使用整套的datatable,就是说在实现显示/隐藏功能的同时,必须利用他的插件自动生成分页,自动搜索,排序等功能,就是全家福一样,全部推送给你这里只贴出显示/隐藏列的代码,
- 第一步
<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"></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,但是存在问题,主要问题是在获取下拉框数据的时候,存在于列表数据对不上的情况,具体的网友们大家自行测试吧。