Jquery datatables 重新加载数据

时间：2024-10-30 11:16:16

      Datatables这个表格控件只能说实在太强大了，支持很多的扩展，也有对应的中文网站，上面有很多的解决方案，项目中有一个界面，需要使用表格来展示，不过数据很少，只有5列，所以就没采用后台分页的形式，直接点击查询，通过发送ajax，每次判断表格是否已经初始化，如果已经初始化，则清空之前的数据，重新生成一个表格，如下js：

     

var WageSummary = function() { // 这个js可以放在jsp的ready函数里面进行下载，对查询按钮进行监听：
	return {
		init : function() {
   // 查询按钮监听
	$("#query").click(
		 function() {
			var wageBeginDate = ("wageBeginDate").value;
			var wageEndDate = ("wageEndDate").value;
            // 刷新表格数据,2016年11月8日09:42:46
			$.ajax({
				url : "",
				type : "POST",
				async : false,
				data : {
						"wageBeginDate" : wageBeginDate,
						"wageEndDate" : wageEndDate
				},
				dataType : "json", // ajax返回值设置为text（json格式也可用它返回，可打印出结果，也可设置成json）
				success : function(data) {
					if (data == null) {
						alert("获取数据失败,请重新选择日期");
						return false;
					}

				$('#sample_1').show();
				if (typeof(wageSummaryTable) == "undefined") {
					wageSummaryTable = $('#sample_1').dataTable({
						"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>',
						"oLanguage" : oLanguageData,
						"aoColumns" : aoColumnsData,
						"aaData" : data,
						"bDestroy" : true,
						"retrieve": true,//保证只有一个table实例
						"aoColumnDefs": [
									 { "sType": "html-percent", "aTargets": [0] },  //指定列号使用自定义排序
										 ],
									});
									}else{
													();//清空数据.fnClearTable();//清空数据
(); //还原初始化了的datatable
wageSummaryTable = $('#sample_1').dataTable(
		{
				"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>',
				"oLanguage" : oLanguageData,
				"aoColumns" : aoColumnsData,
				"aaData" : data,
				"bDestroy" : true,
				"retrieve": true,//保证只有一个table实例
				"aoColumnDefs": [
					{ "sType": "html-percent", "aTargets": [0] },    //指定列号使用自定义排序
						],
														
						});
					}
												
},
				error : function(data) {
					alert("获取数据失败,请重新选择日期");
				}
	});

});

		}
	}

}();

var oLanguageData = {
	"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" : ": 以降序排列此列"
	}
};

// 列的定义
var aoColumnsData = [

{
	"mData" : "positionRank"
},
/*
 * 最高
 */
{
	"mData" : "mostHigh"
},
/*
 * 最低
 */
{
	"mData" : "mostlow"
},
/*
 * 平均
 */
{
	"mData" : "wageAverage"
},
/*
 * 人数
 */
{
	"mData" : "amount"
}

];

         2.注意的是表格的变量是一个全局的，放在一个script里面就好，我的是这样的：

 

 

	<script>
			    var wageSummaryTable;
			    //发ajax获取有数据的月份
			    var wageMonths={};//从数据库中查询有数据的月份list集合
}

       3.第二个注意点是使用的是datatables的1.10版本，所以要使用清空数据的函数的话，就可以使用：

        ();//清空数据.fnClearTable();//清空数据
        (); //还原初始化了的datatable


      如果你使用了后台分页的形式的话，每次点击查询按钮需要重新加载url的话，就可以参考我的这个链接：后台刷新url

 

 

相关文章