超全table功能Datatables使用的填坑之旅--2:post 動態傳參: 解決: ajax 傳參無值問題.

官網解釋與方法: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": 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