Datatables post 動態提交數據(傳參數) 異步數據(ajax.data)
阿新 • • 發佈:2018-12-15
-o .data val 動態 文章 沒有 arc tro class
官網解釋與方法:1 當向服務器發出一個ajax請求,Datatables將會把服務器請求到的數據構造成一個數據對象。
2 實際上他是參考jQuery的ajax.data屬性來的,他能添加額外的參數傳給服務器。
3 Datatables在此基礎上還提供了一個函數,以便Datatables在請求服務器的時候可以處理這些數據.
閑言少敘,舉幾個栗子:
註意, 參數格式是必須和例子一樣.
自認為最好用的datatables, post動態傳參方法:
//初始化表格 var oTable = $("#example").DataTable({ ajax: { url: "http://xingJinYuBlog/index",
data: { function ( d ) {
var d ={},
d.xxx=$(‘#extra‘).val();
return JSON.stringify( d );
}
} });
//當你需要多條件查詢,你可以調用此方法,動態修改參數傳給服務器
function reloadTable() {
var name = $("#seName").val();
var admin = $("#seAdmin").val();
var param = { "obj.name": name, "obj.admin": admin };
oTable.settings()[0].ajax.data = param;
oTable.ajax.reload(); }
註:
1 上面的param對象的內容, 對應是d對象的內容.
2 重新渲染表, 執行reloadTable(),即可實現.
下面是其他的方法:
1 添加一個靜態值,來提交額外的參數(user_id)
特點:--post方法, 靜態傳參
$(‘#example‘).dataTable( {
"ajax": {
"url": "http://xingJinYuBlog/index",
"data": {
"user_id ": 451
}
}
} );
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
Datatables post 動態提交數據(傳參數) 異步數據(ajax.data)