DataTable 带滚动刷新全选全不选

引入
../../../../media/css/jquery.dataTables.css
../../css/scroller.dataTables.css


https://code.jquery.com/jquery-3.3.1.js
../../../../media/js/jquery.dataTables.js
../../js/dataTables.scroller.js
function getDgBgshTable(){
		sjxmFwTable = $('#sjxmFwTable').DataTable({
			destroy : true,
			serverSide : true,
                        paging : true,
			dom: "frtiS",
			scrollX: true,
			scrollY: 246,
			scroller: {
				loadingIndicator: true
			},
			responsive : true,
			processing : true,
			autoWidth : false,// 自动计算列宽
			deferRender : true,// 设置延迟渲染,提高效率用
			draw : false,
			searching: false, 
			bLengthChange: false,
			order : [ 1, 'asc' ],
			ajax : {
				url : "sjxm2/getSjfw",
				type : "POST",
				data : function(d) {
					var sentJson = GET_SENT_JSON(d);
					sentJson.search1 = sjxmglArr[0].sjxmdm;  //sjxmdm
					sentJson.search2 = $('#text_xmbh').val();//xmbh
					sentJson.search3 = $('#text_bmbh').val();//bmbh

					return sentJson;
				},
				error : function(e) {
					ALERT_ERROR(sjxmFwTable, e);
				},
			},
			lengthMenu : PAGELENGTH,
			"language" : LANGUAGESETTING,
			columnDefs : [
				{ "targets": 0 ,"name":"bmbh"   ,"title": " <a><i class='fa fa-circle selectAll_bgdg'></a></i><a><i class='fa fa-circle-o QselectAll_bgdg'></a>", "width": "2%","orderable" : false,},
				{ "targets": 1 ,"name":"bmbh" ,"title": "部门编号", "visible": true,"width": "2%", orderable:false,},
				{ "targets": 2 ,"name":"bmmc","title": "部门名称" ,"visible": true,"width": "16%"  ,orderable :true ,},
				{ "targets": 3 ,"name":"xmbh","title": "项目编号" ,"visible": true,"width": "20%" , orderable :false ,},
				{ "targets": 4 ,"name":"xmmc","title": "项目名称" ,"visible": true,"width": "20%" , orderable :false ,},
			],
	        columns: [
				{
	            	"sClass": "text-center",
	      			"data": "bmbh",
	      			"render": function (data, type, row, meta) {
	  					return '<input type="checkbox"  class="checkchild_bgdg" value="' + data + '"  name="childBox"/>';
	      			},
	            },
	        	{data: 'bmbh'},
				{data: 'bmmc'},
				{data: 'xmbh'},
				{data: 'xmmc'},
	        ],
		});
		
		//鼠标移动添加背景颜色
		mouseEvent("sjxmFwTable");
    };
    
    
    var handleCheckbox = function() {
    	$(".selectAll_bgdg").click(function () {

			var bgdg_data = $(sjxmFwTable).context[0].aoData; 
	 		for(var i = 0 ; i < bgdg_data.length ; i++) {
	 			//判断是否延迟渲染
	 			if(bgdg_data[i].anCells != null) {
		 			//没有勾选的场合
		 			if(!bgdg_data[i].anCells[0].firstChild.checked) {
		 				bgdg_orderArr.push(bgdg_data[i]._aData);
		 			}
	 			}
	 		}
	 		$(".checkchild_bgdg").prop("checked", true);
		 });

    	$(".QselectAll_bgdg").click(function () {
			
			var bgdg_data = $(sjxmFwTable).context[0].aoData; 
		 	for(var i = 0 ; i < bgdg_data.length ; i++) {

		 		//判断是否延迟渲染
		 		if(bgdg_data[i].anCells != null) {
			 		//勾选的场合
		 			if(bgdg_data[i].anCells[0].firstChild.checked) {
		 				var xmbh = bgdg_data[i]._aData.xmbh;
				 		for(var m = 0 ; m < bgdg_orderArr.length ; m++) {
				 			if(xmbh == bgdg_orderArr[m].xmbh) {
						 		bgdg_orderArr.splice(m, 1);
				 			}
				 		}
		 			}
		 		}
		 	}
		 	$(".checkchild_bgdg").prop("checked", false);
		 });
		 
    	sjxmFwTable.off("click").on( 'click', '.checkchild_bgdg',  function (e) {
			var checked = $(this).is(":checked");
			nRow = $(this).parents('tr')[0];
			var nData = sjxmFwTable.row( nRow ).data();
			if (checked) {
				bgdg_orderArr.push(nData);
			} else {
				var xmbh = nData.xmbh;
		 		for(var m = 0 ; m < bgdg_orderArr.length ; m++) {
		 			if(xmbh == bgdg_orderArr[m].xmbh) {
		 				bgdg_orderArr.splice(m, 1);
		 			}
		 		}
			}
		});
    }
列表刷新   sjxmFwTable.ajax.reload();

带滚轴时表头会产生错位,需要刷新
setTimeout(function(){
	sjxmFwTable.ajax.reload();
 },200);
posted @ 2019-09-10 17:25  ^sun^  阅读(552)  评论(0)    收藏  举报