JQuery datatables 使用Fixedcolumns固定列控件 多选框选中问题解决方案

      如题，JQuery datatables 使用Fixedcolmun 多选框选中问题解决方案，如果你恰好用到了固定前几列的插件，还有恰好要有多选的功能，你肯定会遇到类似于点击了表头，想全选下面的每行数据的功能，这时候你会发现，为什么使用click方法来监听表头的checkbox没有用了，好吧，你也遇到这个坑了，那就和我一起跳下去吧，分析如下：

    1.使用固定列之后，会动态生成复制固定几列，找到checkbox的父级的class，添加click函数，你会发现一点反应都没有，如下图：

      我之前是使用了click函数添加事件的方式，这种是不会有反应的，我就是跳到了这个坑里面，如果使用on 绑定click事件的方式，以下是解释，感谢前辈们：

     以上三种方法在jQuery1.8之后都不推荐使用，官方在1.9时已经取消使用live()方法了，所以建议都使用on()方法。
支持给动态元素和属性绑定事件的是live和on，其中live在JQUERY 1.7之后就不推荐使用了。现在主要用on，使用on的时候也要注意，on前面的元素也必须在页面加载的时候就存在于dom里面。动态的元素或者样式等，可以放在on的第二个参数里面。
on的实现通过jquery.event.add, 将事件公用处理函数elemData.handle,通过addEventListener绑定到具体的事件类型上。加on是在点击事件的时候自动触发。不加on需要手动注册click事件，比如$("#btn1").click=function(){}
参考这个链接：http://www.cnblogs.com/xilipu31/p/4105794.html                                  

         2.在使用了on绑定click之后，我就可以监听到是否点击了表头的checkbox，来遍历更改表格数据每行的checkbox状态，同样也需要，由于 固定列是复制的，所以是有两层的，也就是上面一层和下面一层，你需要找到父类class，找到每行的checkbox复选框，如下监听全选与否（以及切换下一页之后，取消表头的选中状态问题）:

var datatables_options = {
				"aLengthMenu" : [ [ 10, 20, 50, 100, -1 ],
						[ 10, 20, 50, 100, "All" ] ],
				"iDisplayLength" : 10,
				"sDom": 'T<"clear">rt<"float_left"i><"float_right_nexpage"p><"float_right_display"l>',
				//"sDom" : "<r>t<'float_left'i><'float_right_nexpage'p><'float_right_display'l>>",
				// 第一列禁止排序,因为这是复选框,不需要排序
				"bSort" : false,
				"bProcessing" : false,
				"bServerSide" : true,
				"bDestroy" : true,
				"bJQueryUI" : false,
				"sScrollX" : "100%",
				"oLanguage" : oLanguageData,
				"aoColumns" : aoColumnsData,
				// 复选框点击下一页进行更新状态为未选中
				"fnDrawCallback" : function() {
				   // alert("监听重绘完成函数的动作");
				    
                    //关键点：需要先去掉checkbox的父级div的类checker，因为这个会影响选中的显示效果
                    $("#uniform-check-all").removeClass("checker");
                    
                    //切换下一页，去掉原来全选的checkbox的状态
 					$("span").removeClass("checked");
 					$("span #check-all").attr("checked",false);
 					
                      
                   //更新表格
                    $.uniform.update();
                    
				},
				"fnRowCallback" : function(nRow, aData,
						iDataIndex) {
					
				},
				"sAjaxSource" : "wagePreview.action",
				"fnServerData" : function(sSource, aoData,
						fnCallback) {
					$.ajax({
						"type" : 'post',
						"url" : sSource,
						"async":false,
						"dataType" : "json",
						"data" : aoData,
						"success" : function(resp) {
							fnCallback(resp);
						},
						error : function(XMLHttpRequest,
								textStatus, errorThrown) {
							alert("网站开小差了,请稍后重试!");
						}

					});
				},
				"fixedColumns":   {
			         "iLeftColumns" : 4,
				  "sHeightMatch" : "auto"，//固定前四列
		        },

			};

			// 设置固定前三列的功能
			datatables_options["sScrollX"] = "100%";
			datatables_options["sScrollY"] = "400px";
			datatables_options["bScrollCollapse"] = true;
			// datatables_options["sScrollXInner"] = '150%';
			
			var table = $('#sample_1').DataTable(
					datatables_options);
			//这个监听函数要跟在table的后面，否则还是没有效果的
			//重点在这，使用click函数是没有反应的，监听复选框的状态，重要需要使用on的形式，直接click无法改变状态
			$('.DTFC_LeftHeadWrapper div').on('click','input' ,function () {
			
                           $("#uniform-check-all").removeClass("checker");
                           //切换下一页，去掉原来全选的checkbox的状态
 					$("span").removeClass("checked");
 					
					
					//表格绘制完成，监听全选的复选框按钮，将表格所有选中
                            //alert("全选的按钮事件");
			                var val = $(this).prop("checked");
			                $("input[type='checkbox']", ".DTFC_LeftHeadWrapper").attr("checked", val);
			                
			                $("#check-all").attr("checked", val);
			                if (val) {
			                	$(".checkboxes").each(function(index){
			                	     $(this).attr("checked", val);
			                	    // alert("设置下面全选");
			                	});
			                } else {//不勾选
				               $(".checkboxes").each(function(index){
			                	     $(this).attr("checked", val);
			                	     //alert("取消下面全选");
			                	});
			                }
                      
             } );	

          参考官网datatables的写法，如下图片：

          3.还有一个非常重要的是如果要更改表头的checkbox状态，你需要去掉他父级div的class为checker，因为我发现这个checker不去掉的话，虽然是选中了，但状态没有更改，如下截图：

         这个类还会影响表头和表格中的额复选框的样式，去掉之后就显示正常，百度浏览器差别更大，这也是一个很大的坑，如下图：

        

       4.至此就完成了JQuery datatables 表格控件，固定列之后的多选框选中与取消、切换页数取消选中的功能，写的有点乱，是刚好解决才想着分享出来，我想肯定会有人遇到同样的问题，有不懂的可以随时问我。

    注，当你新建datatables的时候使用的是大写的形式，需要隐藏某些列，和小写是有区别的，如下：

//dataTable.fnSetColumnVis($(this).attr('value'), true);//初始化如果为data的时候，就需要使用这个隐藏
wageNowTable.column($(this).attr('value')).visible(false);//初始化如果为Data的时候，就需要使用这个隐藏