jquery.dataTables表格列动态显⽰隐藏（加⼯）checkbox刷新
保持不变
这篇博客参考这位⼤神的:.这篇博客呢，有⼀个缺陷是只能点击左边的复选框才能改变显⽰与隐藏，我修改了他的逻辑:
项⽬中使⽤到了datatalbes⽤来展⽰表格的数据，还有bootstrap框架⽤来点击弹出下拉的⼀个选项，所以需要在列表中添加复选框，以便点击⼀次，就将datatables的某个列进⾏显⽰和隐藏，步骤如下:
1.⾸先导⼊响应的js，还有html代码，如下:
<div class="btn-group pull-right">
<button id="setcolumnvisible" class="btn dropdown-toggle pull-right"
data-toggle="dropdown" >
设置 <i class="icon-angle-down"></i>
</button>
<!--点击按钮会弹出下⾯的相应的下拉列表-->
<ul class="dropdown-menu pull-right">
<li><label> <input type="checkbox" class="hideColCheck" name="box" value="1"
checked="checked"> 退休证号
</label></li>
<li><label> <input type="checkbox" class="hideColCheck" name="box" value="2"
checked="checked">姓名
</label></li>
<li><label><input type="checkbox" class="hideColCheck" name="box" value="3"
checked="checked">职务(技术)⼯资</label></li>
</ul>
</div>
实现的效果如下:
2.接着通过Jquery，使⽤class的形式，到对应的⾏，还有更改checkbox的状态，调⽤隐藏datatables的列的显⽰和隐藏⽅
法:dataTable.fnSetColumnVis(1, true);,js的代码如下:(有个前提是你已经使⽤了datatables，创建好了表格的对象):
// 通过jquery 查到相应每个li 并注册其点击事件。为了防⽌点击，将列表消失，需要监听⼀下动作
$(".dropdown-menu").find("li").click(function(e) {
// 阻⽌事件冒泡⽬的是不使下拉列表隐藏，如果不加这句话就会每点击⼀⾏，下拉列表就隐藏咯
e.stopPropagation();
})
// 并不表⽰完成了封装，这样有个问题，点击checkbox的时候，你会发现列的显⽰、隐藏状态，跟checkbox的选中状态是不统⼀的。这是因为点击checkbox会触发状
$(".dropdown-menu").find(".hideColCheck").click(function(e) {
e.stopPropagation();
var val = $(this).prop("checked");
alert(val);
if (val == true) {
// 表⽰显⽰操作
dataTable.fnSetColumnVis( $(this).attr('value'), true);
} else {
// 表⽰隐藏操作
dataTable.fnSetColumnVis($(this).attr('value'), false);
}
})
// ---------------------当⽉⼯资中设置某些列隐藏或者显⽰--------结束-----------------
其中datatable是代表上⾯已经创建好的表格对象，如下代码:
var dataTable = $('#sample_1')
.DataTable(
{
"aLengthMenu" : [ [ 10, 20, 50, 100, -1 ],
[ 10, 20, 50, 100, "All" ] // change
/
/ per
// page values
// here
],
// set the initial value
"iDisplayLength" : 10,
"sDom" : "<<'float_right'f>r>t<'float_left'i><'float_right'p><'float_right'l>>",
"oLanguage" : {
"sProcessing" : "处理中...",
"sLengthMenu" : "显⽰ _MENU_ 项结果",
"sZeroRecords" : "没有匹配结果",
"sInfo" : "显⽰第 _START_ ⾄ _END_ 项结果，共 _TOTAL_ 项",
"sInfoEmpty" : "显⽰第 0 ⾄ 0 项结果，共 0 项",
"sInfoFiltered" : "(由 _MAX_ 项结果过滤)",
"sInfoPostFix" : "",
"sSearch" : "搜索:",
"sUrl" : "",
"sEmptyTable" : "表中数据为空",
"sLoadingRecords" : "载⼊中...",
"sInfoThousands" : ",",
"oPaginate" : {
"sFirst" : "⾸页",
"sPrevious" : "上页",
"sNext" : "下页",
"sLast" : "末页"
},
"oAria" : {
"sSortAscending" : ": 以升序排列此列",
"sSortDescending" : ": 以降序排列此列"
}
},
"aoColumnDefs" : [ {
"bSortable" : false,
"aTargets" : [ 0 ]
} ],// 第⼀列禁⽌排序
"order" : [ [ 0, null ] ]
// 第⼀列排序图标改为默认
});
注释已经很详细了，还特别介绍⼀下，禁⽌某⼀⾏的列不排序的写法,:
"aoColumnDefs" : [ {
"bSortable" : false,
"aTargets" : [ 0 ]
} ],// 第⼀列禁⽌排序
引⼊的js如下:
<script src="media/js/jquery.slimscroll.min.js" type="text/javascript"></script>
<script src="media/js/jquery.blockui.min.js" type="text/javascript"></script>
<script src="media/kie.min.js" type="text/javascript"></script>
<script src="media/js/jquery.uniform.min.js" type="text/javascript"></script>
<script type="text/javascript" src="media/js/bootstrap-datepicker.js"></script>
<!-- END CORE PLUGINS -->
<!-- BEGIN PAGE LEVEL PLUGINS -->
<script type="text/javascript" src="media/js/select2.min.js"></script>
<script type="text/javascript" src="media/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="media/js/DT_bootstrap.js"></script>
欢迎拍砖，介绍⼀下如何获取checkbox状态，并每次点击⼀次，更换选中或者没选中，如下函数:
$("input[name='box'][checked]").change(function() {  //checkbox的name都设置成box
var checked = jQuery(this).is(":checked");
jQuery(this).each(function() {
if (checked) {
dataTable.fnSetColumnVis(1, false);
// 阻⽌事件冒泡⽬的是不使下拉列表隐藏，如果不加这句话就会每点击⼀⾏，下拉列表就隐藏咯
// e.stopPropagation();
} else {
dataTable.fnSetColumnVis(1, true);
}
});
});
注：还得注意⼀下attr和prop函数的区别：区别如下:
jquery1.6中新加了⼀个⽅法prop()，⼀直没⽤过它，官⽅解释只有⼀句话：获取在匹配的元素集中的第⼀个元素的属性值。
⼤家都知道有的浏览器只要写disabled，checked就可以了，⽽有的要写成disabled = "disabled"，checked="checked"，⽐如⽤attr("checked")获取checkbox的checke jq提供新的⽅法“prop”来获取这些属性，就是来解决这个问题的，以前我们使⽤attr获取checked属性时返回"checked"和""，现在使⽤prop⽅法获取属性则统⼀返回true和
那么，什么时候使⽤attr()，什么时候使⽤prop()？
1.添加属性名称该属性就会⽣效应该使⽤prop();
2.是有true,false两个属性使⽤prop();
3.其他则使⽤attr();
项⽬中jquery升级的时候⼤家要注意这点！
=================================华丽丽的分割线,2016年10⽉26⽇
11:59:53=======================================
上述的代码，只要不刷新界⾯，的确是能起到checkbox保存状态，进⾏表格的列隐藏与否，但现在有个需求，这个设置某些列隐藏的，需要保存在本地，然后每次刷新后者从别的页⾯进来，都需要读取上次的复选框的选中状态，进⾏更新，但checkbox的状态信息是已经实现了保存在本地，就是遇到⼀个坑：每次刷新重新进⼊这个界⾯，使⽤jquery的形式设置 checkbox的状态，看打印的value是已经改了，但点击设置，下拉弹出来的checkbox的钩并没有去掉，在浏览器调试发现，点击的时候,⽗的div会⾃动加⼀个checked的类，这个类给它添加了样式，如下图⽚:
可以看到span多出了⼀个class，不太清楚这个DT_bootstrap.css下拉菜单做了什么特殊的处理，这个复选框的状态冲突了，所以在下次刷新重新进⼊这个界⾯的时候，删除掉这个绑定的class，就好了，如下代码，点击设置，更新checkbox状态:
//设置下拉的复选框的选中与否
$("#setcolumnvisible").click(function() {
var selectVible = $("#setcolumnvisible").val();
if(selectVible.length >0){
var selectVibleConver = selectVible.substring(0,
selectVible.length - 1);
alert("从本地拿到的数据"+selectVible);
// 以逗号进⾏分割
var dataRowsVisible = selectVibleConver.split(",");
$("input:checkbox[name=box]").each(function(index,element) {
for(var i=0;i<dataRowsVisible.length;i++){
jquery的attr属性var num = parseFloat(dataRowsVisible[i]) - 1;
if(index == num){
$(this).attr("checked", false);
$(this).parent().removeClass("checked");
}
}
});
}
});

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。