Bootstrap 数据服务器端处理 - 数据未显示

Question

我是 python Flask 开发的新手。我正在尝试实现服务器端处理数据 table，它将从 mysql 数据库 table 中获取包含 1000 条记录的记录。

我希望 table 每页显示 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

如果我不使用它，我会收到 "Could not read property 'length' of undefined.." Jquery 错误

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

单击“确定”后，我的数据 table 就是这样的 -

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

Answer 1

CAUSE

选项 columns should not be sub-property of ajax，因此缺少右括号 }。

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

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

DEMO

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

Answer 2

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

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

但是这个模块是为 python 金字塔框架编写的。需要进行一些小改动才能使其与 Flask 一起使用。

这是最终代码-

$('#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" }
                ]
              });

Bootstrap 数据服务器端处理 - 数据未显示

Bootstrap data server side processing - data not displayed

python

datatables

flask

twitter-bootstrap-3

datatables-1.10