DataTables（serverSide）在第一次請求時OK，在搜索或重新排序時請求中的「[Object object]」失敗

Question

使用DataTables jQuery插件與serverSide = true（這裏的示例很小，但最終我們想要處理大量記錄）。在初始請求（首頁加載）時，一切正常。 DataTable看起來不錯，它包含預期的數據。

請求信息

Request method = GET 
Request args = ImmutableMultiDict([('draw', u'1'), ('columns[0][data]', u'client_user_id'), ('columns[1][name]', u''), ('columns[5][searchable]', u'true'), ('columns[5][name]', u''), ('columns[4][search][regex]', u'false'), ('columns[1][orderable]', u'true'), ('columns[4][orderable]', u'true'), ('columns[5][orderable]', u'true'), ('columns[2][orderable]', u'true'), ('columns[4][name]', u''), ('order[0][dir]', u'asc'), ('columns[1][search][regex]', u'false'), ('columns[3][name]', u''), ('columns[0][search][value]', u''), ('columns[2][searchable]', u'true'), ('columns[3][search][regex]', u'false'), ('extra_search', u'test'), ('columns[0][search][regex]', u'false'), ('columns[5][data]', u'last_login'), ('start', u'0'), ('columns[4][searchable]', u'true'), ('columns[0][searchable]', u'true'), ('columns[5][search][value]', u''), ('columns[3][searchable]', u'true'), ('columns[2][search][value]', u''), ('columns[2][search][regex]', u'false'), ('columns[1][data]', u'status'), ('columns[1][searchable]', u'true'), ('columns[5][search][regex]', u'false'), ('columns[0][orderable]', u'true'), ('columns[4][data]', u'client_id'), ('columns[0][name]', u''), ('columns[2][data]', u'lastname'), ('columns[3][data]', u'email_address'), ('search[value]', u''), ('columns[3][orderable]', u'true'), ('_', u'1484145221101'), ('columns[4][search][value]', u''), ('search[regex]', u'false'), ('columns[1][search][value]', u''), ('order[0][column]', u'0'), ('columns[2][name]', u''), ('length', u'10'), ('columns[3][search][value]', u'')]) 
127.0.0.1 - - [11/Jan/2017 09:33:41] "GET /client/rou/ajax/mwe?draw=1&columns%5B0%5D%5Bdata%5D=client_user_id&columns%5B0%5D%5Bname%5D=&columns%5B0%5D%5Bsearchable%5D=true&columns%5B0%5D%5Borderable%5D=true&columns%5B0%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B0%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B1%5D%5Bdata%5D=status&columns%5B1%5D%5Bname%5D=&columns%5B1%5D%5Bsearchable%5D=true&columns%5B1%5D%5Borderable%5D=true&columns%5B1%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B1%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B2%5D%5Bdata%5D=lastname&columns%5B2%5D%5Bname%5D=&columns%5B2%5D%5Bsearchable%5D=true&columns%5B2%5D%5Borderable%5D=true&columns%5B2%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B2%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B3%5D%5Bdata%5D=email_address&columns%5B3%5D%5Bname%5D=&columns%5B3%5D%5Bsearchable%5D=true&columns%5B3%5D%5Borderable%5D=true&columns%5B3%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B3%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B4%5D%5Bdata%5D=client_id&columns%5B4%5D%5Bname%5D=&columns%5B4%5D%5Bsearchable%5D=true&columns%5B4%5D%5Borderable%5D=true&columns%5B4%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B4%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B5%5D%5Bdata%5D=last_login&columns%5B5%5D%5Bname%5D=&columns%5B5%5D%5Bsearchable%5D=true&columns%5B5%5D%5Borderable%5D=true&columns%5B5%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B5%5D%5Bsearch%5D%5Bregex%5D=false&order%5B0%5D%5Bcolumn%5D=0&order%5B0%5D%5Bdir%5D=asc&start=0&length=10&search%5Bvalue%5D=&search%5Bregex%5D=false&extra_search=test&_=1484145221101 HTTP/1.1" 200 - 

...和數據從服務器返回。然而，隨着數據表中的任何交互（例如，單擊列標題進行排序的結果，或者在搜索框中輸入）和隨後的Ajax請求是這樣的：嘗試搜索或排序

Request method = GET 
Request args = ImmutableMultiDict([('[object Object]', u''), ('_', u'1484145221102')]) 
127.0.0.1 - - [11/Jan/2017 09:33:46] "GET /client/rou/ajax/mwe?[object%20Object]&_=1484145221102 HTTP/1.1" 200 - 

時

請求信息

爲什麼在第一種情況下，我們得到的所有參數都OK，而在第二種情況下，我們得到[Object object]？需要進行哪些更改才能使DataTables生成有效的請求？

的Python（使用瓶）

@blueprint.route('/rou/ajax/mwe', methods=("GET", "POST")) 
def b_ajax_mwe(): 

    error = False 
    error_text = None 
    data = [] 

    print("Request method = {}".format(request.method)) 
    print("Request args = {}".format(request.args)) 
    draw = request.args.get('draw') or 1 

    try: 
     # Yes, I know this always returns same result... for now 
     # once we have request from DataTable that's not "[Object object]" 
     # we will modify to return data based on request 
     query = ClientUser.query \ 
      .filter(ClientUser.client_id == 2) \ 
      .limit(10) \ 
      .all() 

     data = [{'client_user_id': cu.client_user_id, 
       'status': cu.status, 
       'email_address': cu.email_address, 
       'lastname': cu.lastname, 
       'client_id': cu.client_id, 
       'last_login': cu.last_login} for cu in query] 

    except Exception, err: 
     error = True 
     error_text = str(err) 

    rows = ClientUser.query.count() 

    result = {'draw': draw, 
       'recordsTotal': rows, 
       'recordsFiltered': len(data), 
       'data': data} 

    if error: 
     result['error'] = error_text 

    return jsonify(result) 

HTML（頭）

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs/dt-1.10.13/datatables.min.css"/> 

HTML（身體）

<table class="table display" id="mwe_table"> 
    <thead> 
     <tr> 
      <th>User ID</th> 
      <th>Status</th> 
      <th>Last name</th> 
      <th>Email</th> 
      <th>Client ID</th> 
      <th>Last login</th> 
     </tr> 
    </thead> 
    <tbody></tbody> 
</table> 

...

<script type="text/javascript" src="https://cdn.datatables.net/v/bs/dt-1.10.13/datatables.min.js"></script> 

（jQuery的1.11東西之前加載從數據表CDN，以上）

的JavaScript

$(document).ready(function() { 

    $('#mwe_table').DataTable({ 
     processing: true, 
     serverSide: true, 
     ajax: { 
      method: 'GET', 
      url: '/client/rou/ajax/mwe', 
     }, 
     "columns": [ 
      { "data": "client_user_id" }, 
      { "data": "status" }, 
      { "data": "lastname" }, 
      { "data": "email_address" }, 
      { "data": "client_id" }, 
      { "data": "last_login" } 
     ] 
    }); 
}); 

沒有錯誤報道在JavaScript控制檯。

Answer 1

我無法使用指定的參數重現，但認爲我可能有一個解決辦法無論如何。您可以明確告訴DataTables如何序列化請求數據。

例如：

$(document).ready(function() { 

    $('#mwe_table').DataTable({ 
     processing: true, 
     serverSide: true, 
     ajax: { 
      url: '/client/rou/ajax/mwe', 
      data: function (d) { 
       console.log(d); // display all properties to console 
       return jQuery.param({ 
        start: d.start, 
        length: d.length, 
        orderColumn: d.order[0].column, 
        orderDir: d.order[0].dir, 
        draw: d.draw 
       }); 
      } 
     }, 
     "columns": [ 
      { "data": "client_user_id" }, 
      { "data": "status" }, 
      { "data": "lastname" }, 
      { "data": "email_address" }, 
      { "data": "client_id" }, 
      { "data": "last_login" } 
     ] 
    }); 
}); 

注意，我通過串行化JavaScript對象使用jQuery.param()選擇性地發送一些參數寫入application/x-www-form-urlencoded。爲了簡單起見，JavaScript對象只有簡單的屬性，沒有嵌套的對象或數組。打電話給jQuery.param()可能是不必要的，但我把它放在明確的位置。