1. 程式人生 > >Datatables post 動態提交數據(傳參數) 異步數據(ajax.data)

Datatables post 動態提交數據(傳參數) 異步數據(ajax.data)

-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)