使用DataTables和Flask进行服务器端处理

Question

我是一名新手，正在尝试在我的Flask应用程序中使用来自sqlite的数据来实现服务器端处理。我无法弄清楚问题出在哪里。到目前为止，我已经做到了这一点： HTML：

<table id="myTable" class="table table-striped" style="width:100%" >
    <thead>  
        <tr>
            <th>Time</th>
            <th>Mean Current</th>
            <th>Vapour Pressure</th>
            <th>Mean Voltage</th>
            <th>Temperature</th>
            <th>Humidity</th>
            <th>Bar Pressure</th>
            <th>RPM</th>
            <th>Wind Sector</th>
            <th>Wind Speed</th>
            <th>Air Density</th>
            <th>DC Voltage</th>
            <th>Power Sector</th>
            <th>Furling Angle</th>
            <th>Yaw angle</th>
        </tr>
    </thead> 
</table>  

JavaScript:

$(document).ready(function() {
    $('#myTable').DataTable( {
        "processing": true,
        "serverSide": true,
        "ajax": "/page_test"
    } );
});

视图函数:

@app.route('/page_test')
def page_test():
    data = json.dumps(meas[2])
    print data
    return data

meas[2] is my dict:

[dict((c.description[i][0], value) \
        for i, value in enumerate(row)) for row in c.fetchall()]

在“打印数据”中，一切都打印得很好，就像这样：

{"MeanCurrent": 0.05933, "Temperature": 15.095, "YawAngle": 0.0, "MeanVoltage": 0.67367, "VoltageDC": 3.18309, "PowerSec": 0.06923, "FurlingAngle": -0.2266828184, "WindSpeed": 1.884, "VapourPressure": 1649.25948, "Humidity": 0.4266, "WindSector": 0, "AirDensity": 1.23051, "BarPressure": 1020.259, "time": "2015-04-22 20:58:28", "RPM": 0.0, "ID": 1357}

这将乘以行数。

然而，当我运行应用程序并插入查询时，表格仅显示<th>标签，并且在表格顶部写有"Processing..."，没有显示任何数据。在我的flask应用程序终端上，显示了一个巨大的字符串，以下是其中的一小部分：

/page_test?draw=2&columns%5B0%5D%5Bdata%5D=0&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=1&columns%5B1%5D%5Bname%5D=&columns%5B1%5D%5Bsearchable%5

这里是一张截图：

每次我点击th标签时，都会再次出现相同的字符串。看起来我错过了一些重要的东西，但由于这是我的第一个应用程序，我无法弄清楚它是什么。欢迎对代码进行修改的任何建议。

- tzoukritzou

---

我有完全相同的问题。你解决了吗？ - culter

Answer 1

服务器端处理是一种设置，需要您拥有一个能够在自己的服务器/数据库上复制DataTables核心功能的数据库脚本，以管理非常大的数据集。

所有传递给您的脚本的信息（例如那个长字符串）都是您需要使用的输入，以查询数据库返回DataTables要呈现的结果。

如果您希望DataTables从Flask端点加载数据，然后在内部管理所有处理，请进行以下修改：删除serverSide设置并添加列配置，以使数据出现在正确的位置：

Javascript:

$(document).ready(function() {
    $('#myTable').DataTable( {
        "processing": true,
        "ajax": "/page_test",
        // add column definitions to map your json to the table
        "columns": [
            {data: "time"},
            {data: "MeanCurrent"},
            ...
        ]
    } );
});

DataTable 初始化选项：如果您点击“columns”按钮，它会显示每个“列”可接受的各种配置，包括是否可排序、可订购、自定义渲染等。

Python：

from flask import jsonify

@app.route('/page_test')
def page_test():
    return jsonify(meas[2])

- abigperson

---

如果我删除服务器端设置，它根本不会运行视图函数。因此，我将其保留为True，并按照您的建议添加了列。同样的问题仍然存在。我认为我应该做更多的事情，比如发送每页显示的数量之类的东西。另外，它显示“无法读取未定义的属性长度”。 - tzoukritzou

Answer 2

可能存在两个问题：

1）确保您没有使用精简版的jQuery。精简版的jQuery没有ajax，因此如果您在浏览器中检查，您将看到一些错误消息，如“h.ajax不是函数”。这只会无限显示“处理中...”。这让我困惑了一段时间，因为bootstrap默认使用精简版的jQuery，而我正在使用bootstrap。

2）我对datatables并不是专家，但我正在尝试使用它。要使用服务器端显示数据，数据必须按以下格式进行格式化：

return_me = json.dumps({"data": [[1, 1.3478, 23.2223, ...]]})

即，当返回一列名称的字典时，我无法使它正常工作……我必须特别调用它的字典字段“data”，然后给出所有值。也许是我自己在这里搞错了什么，但这就是奏效的方法。

- BreakOnExecute

Answer 3

Using flask, you will get a faster response than using C#.In Server Side Processing, You can send sorted/searched/header value via form in flask. 

在Flask中，您可以使用以下方式获取数据表的值：

Datatabledata= request.form

在SSP中，您可以使用以下方式向Flask发送附加数据：

"data":function(data){ 
data.input="Text"
} 

- sam ruben