引导数据服务器端处理 - 数据未显示答案

【问题标题】：Bootstrap data server side processing - data not displayed引导数据服务器端处理 - 数据未显示
【发布时间】：2015-08-10 19:15:40
【问题描述】：

我是 python 烧瓶开发的新手。我正在尝试实现一个服务器端处理数据表，它将从具有 1000 条记录的 mysql 数据库表中获取记录。

我希望表格每页显示 10 行，并为每个新页面或搜索查询服务器/数据库。

这是我的 HTML -

 <div class="dataTable_wrkld">
                        <table class="table table-striped table-bordered table-hover" id="dataTables-wrkld">
                            <thead>
                            <tr>
                                <!--<th class="bs-checkbox-1"></th>-->
                                <th data-align="center">ID</th>
                                <th data-align="center">Name</th>
                                <th data-align="center">Total Items</th>
                            </tr>
                            </thead>
                        </table>
 </div>

这是我的脚本 -

<!-- DATA TABLES -->
<script>
    var table_data = ''
    $(document).ready(function() {
        $('#dataTables-wrkld').DataTable({
                responsive: true,
                processing: true,
                serverSide: true,
                ajax: {
                url: '/datatable_change',
                type: 'POST',
                data: function ( args ) {
                         return { "args": JSON.stringify( args ) };
                },
                dataSrc: function (json) {
                        var arr = Object.keys(json).map(function(k) { return json[k] });
                        return arr;
                },
                columns: [
                {"data": "ID"},
                {"data": "Name"},
                {"data": "Items"}
                ]
            }
        });
    });
</script>

在服务器端我有 -

    @app.route('/datatable_change', methods=['POST'])
def datatable_change():
    abc = json.loads(request.values.get("args"))
    temp = session.query(Table.id, Table.name, table.total_items).limit(100)
    data = Utilities.make_json_dict(['ID', 'Name', 'Items'], temp)
    print(json.dumps(data))
    return json.dumps(data)

当我运行它时，会遇到断点并从数据库中获取数据。这就是我的 json 的样子 -

[
{"Items": 31, "ID": 1, "Name": "abc"}, 
{"Items": 35, "ID": 2, "Name": "def"}, 
{"Items": 38, "ID": 3, "Name": "ghi"}
.
.
.
]

我使用这个答案来格式化我的数据源 - Format ajax dats src

如果我不使用它，我会收到“无法读取未定义的属性 'length'..”Jquery 错误

运行完这一切后，这是我得到的错误 -

点击确定后，我的数据表就是这样的 -

没有响应分页的通知。我在浏览器控制台中没有收到任何错误。我在这里做错了什么？请帮忙。

【问题讨论】：

columns: [之前缺少逗号
编辑添加逗号；在构建问题时错过了它 - 不过，这不是问题。
您能否在dataSrc 中的return arr; 之前添加console.log(JSON.stringify(json)); 并发布结果？
得到这个 - [{"Items":31,"ID":1,"Name":"ABC"}, {"Items":35,"ID":2,"Name" :"ABC"}, {"Items":38,"ID":3,"Name":"ABC"}, {"Items":25,"ID":4,"Name":"ABC"}, {"Items":44,"ID":5,"Name":"ABC"}, {"Items":35,"ID":6,"Name":"ABC"}, {"Items":28 ,"ID":7,"Name":"ABC"}, {"Items":41,"ID":8,"Name":"ABC"}, {"Items":33,"ID":9 ,"名称":"ABC"}, {"Items":26,"ID":10,"Name":"ABC"}, {"Items":44,"ID":11,"Name":" ABC"}, ...]

标签： python twitter-bootstrap-3 flask datatables datatables-1.10

【解决方案1】：

原因

选项columns 不应是ajax 的子属性，因此缺少右括号}。

此外，您返回的 JSON 是针对客户端模式构建的，因此您需要设置 serverSide: false。在服务端处理模式下，需要在服务端进行排序、过滤和排序，返回的数据需要有certain structure。

根据您的数据结构，选项dataSrc 应设置为空字符串，即dataSrc: ""。

演示

有关代码和演示，请参阅 this jsFiddle。

【讨论】：

感谢您，我可以通过更改列选项来显示数据。我还对其进行了修改以与服务器端处理一起使用，但是，该表不响应分页和搜索。你能告诉我这里需要做什么吗？

【解决方案2】：

我终于让它与服务器端处理一起工作。在 html 方面，Gyrocode.com 在他的回答中提到了该错误。但我更改了 serverSide: True 以及返回数据的格式。

在服务器端，有一个 python 模块负责处理必要的表事件 - python datatables module

然而，这个模块是为 python 金字塔框架编写的。需要进行一些小的更改才能使其与烧瓶一起使用。

这是最终代码 -

$('#dataTables-server').DataTable({
                responsive: true,
                processing: true,
                serverSide: true,
                ajax: {
                  url: '/datatable_change',
                  method: 'post',
                  data: function(args) {
                    return {
                      "args": JSON.stringify(args)
                    };
                  }
                },
                columns: [

                  { "data": "ID" },
                  { "data": "Name" },
                  { "data": "Items" }
                ]
              });

【讨论】：