超全table功能Datatables使用的填坑之旅--2:post 动态传参: 解决: ajax 传参无值问题.

时间:2022-09-24 14:02:42

官网解释与方法:1 当向服务器发出一个ajax请求,Datatables将会把服务器请求到的数据构造成一个数据对象

2 实际上他是参考jQuery的ajax.data属性来的,他能添加额外的参数传给服务器。

3 Datatables在此基础上还提供了一个函数,以便Datatables在请求服务器的时候可以处理这些数据.

下面举几个栗子:参数格式是必须和例子一样:

*最优选:post动态传参方法:

// 优点: 可动态获得参数的值,防止各种获得参数为null的bug!
var myTable = $("#example").DataTable({
ajax: {
url: "http://xingJinYuBlog/index",
data: {
function (d) {
return {
"XXX": $('#extra').val(),
"XXX1": $('#extra1').val()
}
} }
}
}); //重新渲染表格, 动态改变ajax参数值
function reloadTable() {
var param = {
"name": $("#seName").val(),
"admin": $("#seAdmin").val()
};
myTable.settings()[0].ajax.data = param;
myTable.ajax.reload();
}

注意:

1 上面的param对象的内容, 对应是d对象的内容.

2 重新渲染表, 执行reloadTable(),即可实现.

下面是其他的方法:

1 添加一个静态值,来提交额外的参数(user_id)

 特点:--post方法, 静态传参

$('#example').dataTable( {
"ajax": {
"url": "http://xingJinYuBlog/index",
"data": {
"user_id":
}
}
} );

2 通过操作数据对象添加数据请求(函数没有返回)

特点:--post方法, 动态传参

$('#example').dataTable( {
"ajax": {
"url": "http://xingJinYuBlog/index",
"data": function ( d ) { d.extra_search = $('#extra').val(); } } } );

3 添加数据请求(函数有返回)

特点:--post方法, 动态传参

$('#example').dataTable( {
"ajax": {
"url": "http://xingJinYuBlog/index",
    "data": function ( d ) { return $.extend( {}, d, { "extra_search": $('#extra').val() } ); } } } );

4 以json格式提交

特点:--post方法, 动态传参

$('#example').dataTable( {
"ajax": {
"url": "http://xingJinYuBlog/index",
    "contentType": "application/json",
"data": function ( d ) {
var d ={},
d.xxx=$('#extra').val();
    return JSON.stringify( d );
}
}
} );

参考文章有官网:

http://datatables.club/reference/option/ajax.data.html

https://datatables.net/forums/discussion/21940/how-to-pass-new-post-parameters-on-ajax-reload