DataTables (serverSide) 在第一次请求时正常，在搜索或重新排序时请求中出现“[Object object”] 失败答案

【问题标题】：DataTables (serverSide) OK on first request, fails with "[Object object"] in request when searching or reorderingDataTables (serverSide) 在第一次请求时正常，在搜索或重新排序时请求中出现“[Object object”] 失败
【发布时间】：2017-05-26 10:29:12
【问题描述】：

在 serverSide = true 的情况下使用 DataTables jQuery 插件（这里的示例很小，但最终我们要处理大量记录）。在初始请求（第一页加载）时，一切正常。 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 -

...从服务器返回数据。然而，与 DataTable 的任何交互（例如，单击列标题以对结果进行排序，或在搜索框中键入）和随后的 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（使用 Flask）

@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 在 DataTables 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 控制台中没有报告错误。

【问题讨论】：

这可能无法解决您的问题，但在这种情况下recordsTotal 和recordsFiltered 应该是相同的。根据文档，recordsFiltered 应该是 the total number of records after filtering has been applied - not just the number of records being returned for this page of data
明白。谢谢。

标签： jquery python ajax flask datatables

【解决方案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" }
        ]
    });
});

请注意，我通过使用jQuery.param() 将JavaScript 对象序列化为application/x-www-form-urlencoded 来选择性地发送一些参数。为简单起见，JavaScript 对象只有简单的属性，没有嵌套对象或数组。对jQuery.param() 的调用可能是不必要的，但我将其保留为明确的。

【讨论】：