datatable 中 用 ajax 中的 json 发送和接受 更改原来的数据

datatable 中 发送和接受 数据 的格式

1. 加载当前数据的 JS

/* 原来的 */
$(document).ready(function() {
	var table = $('#YKenanTable').DataTable({
		"ajax": {
			"url": "YKenan_YKenan",
			"type": "GET",
			"dataType": "json",
            "dataSrc": ""
		},
		/* 注意:是否允许 从新加载数据,别忘加上 */
		"destroy": "true",
		//使用对象数组,一定要配置columns,告诉 DataTables 每列对应的属性
		//data 这里是固定不变的,name,position,salary,office 为你数据里对应的属性
		"columns": [{
				"data": 'data1',
				"sClass": "text-center"
			},
			{
				"data": 'data2',
				"sClass": "text-center"
			},
			{
				"data": 'data3',
				"sClass": "text-center"
			},
			{
				"data": 'data4',
				"sClass": "text-center"
			},
			{
				"data": 'data5',
				"sClass": "text-center"
			},
			{
				"data": 'data6',
				"sClass": "text-center"
			},
			{
				"data": 'data7',
				"sClass": "text-center"
			}
		],
		"dom": 'Bfrtip',
		"buttons": ['copy', 'excel', 'pdf', 'csv', 'print']
	});
	//给行绑定选中事件
	$('#YKenanTable tbody').on('click', 'tr', function() {
		if($(this).hasClass('selected')) {
			$(this).removeClass('selected');
		} else {
			table.$('tr.selected').removeClass('selected');
			$(this).addClass('selected');
		}
	});
});

2. 更改加载数据的 JS


function changeYKenan(YKenan1, YKenan2, YKenan3, YKenan4) {

	console.log(YKenan1);
//    $(".YKenan #YKenanTable").DataTable().ajax.reload();
	
	$.ajax({
        url: "http://localhost:8080/YKenan",
        type: "GET",
        data: {"YKenan1": YKenan1, "YKenan2": YKenan2, "YKenan3": YKenan3, "YKenan4": YKenan4},
        contentType: "application/json;charsetset=UTF-8",
        datatype: "json",
        async: true,
        success: function(data) {
        	/* 下面的是接受数据 的 重中之重 */
            var data = eval(JSON.stringify(data));
            console.log(data);
            /* 清空 数据 */
            $(".YKenan #YKenanTable").DataTable().clear().draw();
            /* 下面的 dataTable() 中的 d 一定要小写, 而上面的 d 一定要大写 */
//            var tables = $(".YKenan #YKenanTable").dataTable();
//            var settings = tables.fnSettings();
//            settings.sAjaxSource = "http://localhost:8080/YKenan";
//            tables.fnDraw(false);

            $(".YKenan #YKenanTable").DataTable({
//				"ajax": {
//					"url": "YKenan",
//					"type": "GET",
//					"dataType": "json",
//		            "dataSrc": ""
//				},
            	"data": data,
            	/* 注意:是否允许 从新加载数据,别忘加上 */
				"destroy": "true",
				// 使用对象数组,一定要配置columns,告诉 DataTables 每列对应的属性
				// data 这里是固定不变的,name,position,salary,office 为你数据里对应的属性
				"columns": [{
						"data": "data1",
						"sClass": "text-center"
					},
					{
						"data": "data2",
						"sClass": "text-center"
					},
					{
						"data": 'data3',
						"sClass": "text-center"
					},
					{
						"data": 'data4',
						"sClass": "text-center"
					},
					{
						"data": 'data5',
						"sClass": "text-center"
					},
					{
						"data": 'data6',
						"sClass": "text-center"
					},
					{
						"data": 'data7',
						"sClass": "text-center"
					}
				]
			});
        },
        error:function(){
            alert("Error");
        }
	});
}

3. 注意

需要添加允许从新加载数据

/* 注意:是否允许 从新加载数据,别忘加上 */
"destroy": "true"

清空数据

/* 清空 数据 */
$(".YKenan #YKenanTable").DataTable().clear().draw();

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值