1. 程式人生 > >JQuery datatables 表頭複選框切換頁面時保持選中的問題解決

JQuery datatables 表頭複選框切換頁面時保持選中的問題解決

    在使用強大的datatables表格外掛時,發現,發現如果在表頭添加了複選框之後,當第一頁選中,點選切換下一頁的時候,複選框還是選中的狀態,這個是不對的,需要找一個監聽表格繪製完成的函式,重新設定checkbox為未選中,可以加入如下方式:

//切換下一頁更新複選框的狀態為不選中
																	"fnDrawCallback": function() {
																		   alert("切換下一頁更新複選框狀態");
																		   $(this).find('thead input[type=checkbox]').removeAttr('checked');
																		   $.uniform.update();
																		   alert("切換下一頁更新複選框狀態");
																	},
   完整的js檔案如下:
$("#wages-query")
					.click(
							function() {
								// alert("測試");
								$.ajax({
											url : "wagePreview.action",
											type : "POST",
											async : false,
											data : {
											// "wageDate" : date
											},
											dataType : "json", // ajax返回值設定為text(json格式也可用它返回,可打印出結果,也可設定成json)
											success : function(data) {
												//alert("預覽工資查詢成功");
												$('#sample_1').DataTable()
														.fnDestroy();
												$('#sample_1')
														.DataTable(
																{
																	"aLengthMenu" : [
																			[
																					10,
																					20,
																					50,
																					100,
																					-1 ],
																			[
																					10,
																					20,
																					50,
																					100,
																					"All" ]

																	],

																	"iDisplayLength" : 10,
																	"sDom" : "<r>t<'float_left'i><'float_right_nexpage'p><'float_right_display'l>>",
																	"oLanguage" : oLanguageData,
																	"aaData" : data,
																	"aoColumns" : aoColumnsData,
																	"fnRowCallback" : function(
																			nRow,
																			aData,
																			iDataIndex) {
																		$('td:eq(0)',nRow).html("<input type='checkbox' class='checkboxes' name='everyline'  value="
																			+ aData.identification + "></input>");
																		if(aData.number != null && aData.number != "" ){
																			$('td:eq(2)',nRow).html("<a style='cursor:pointer' onclick='toWagePerson(\"" + aData.number +"\");'>" + aData.name + "</a> ");
																		}
																	},
																	//切換下一頁更新複選框的狀態為不選中
																	"fnDrawCallback": function() {
																		   alert("切換下一頁更新複選框狀態");
																		   $(this).find('thead input[type=checkbox]').removeAttr('checked');
																		   $.uniform.update();
																		   alert("切換下一頁更新複選框狀態");
																	},
																	"aoColumnDefs" : [ {
																		"bSortable" : false,
																		"aTargets" : [ 0 ]
																	} ]
																// 第一列禁止排序,因為這是複選框,不需要排序
																});

											},
											error : function(XMLHttpRequest,
													textStatus, errorThrown) {
												//alert("沒有資料");
											}
										});
							});