Flask无需AJAX调用直接传数据给DataTables无数据显示问题求助

我想结合Flask和DataTables实现可排序表格，但不想用API调用，而是直接用后端返回的字典列表渲染。目前后端能返回数据，但前端表格只显示表头，没有内容。

后端路由代码 #

@application.route('/users', methods=['GET', 'POST'])
def eshop():
    result = None
    users= None
    counter = 0
    user_listJson= None
    if request.method == 'POST':
        user_input = request.form['user_input']
        users,counter = get_users(user_input)
        result = "Users found: {}".format(counter)
        user_listJson= jsonify(data=users) if users else None
    return render_template('users.html', result=result, user_listJson=user_listJson)

前端模板代码 #

{% extends "base.html" %}
{% block content %}
    <div class="container mt-5">
    <form method="POST" onsubmit="showLoading()" class="mb-3">
        <div class="input-group">
            <input type="text" name="user_input" class="form-control">
            <button type="submit" class="btn btn-primary">Submit</button>
        </div>
    </form>
    <h3 id="loading" style="display: none;">Loading . . .</h3>
    {% if result %}
        <h3>{{ result }}</h3>
        <h4>They are:</h4>
        <table id="data" class="table table-striped">
            <thead>
            <tr>
                <th>First</th>
                <th>Last</th>
                <th>Email</th>
            </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    {% endif %}
{% endblock %}

{% block scripts %}
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.datatables.net/v/bs5/jq-3.7.0/dt-1.13.8/r-2.5.0/datatables.min.js"></script>
    <script>
        $(document).ready(function () {
            var userList={{ user_listJson}};

            $('#data').DataTable({
                data: userList, // Use the JSON data directly
                columns: [
                    {data: 'First'},
                    {data: 'Last'},
                    {data: 'Email'}
                ],
            });
        });
    </script>
{% endblock %}

解决方案 #

核心问题 #

jsonify返回的是Flask响应对象（包含HTTP头信息），不是纯JSON字符串，直接渲染到JS中会导致语法错误，浏览器控制台能看到类似Unexpected token &的报错。

步骤1：修改后端路由，传递原始数据列表 #

@application.route('/users', methods=['GET', 'POST'])
def eshop():
    result = None
    users = None
    counter = 0
    if request.method == 'POST':
        user_input = request.form['user_input']
        users, counter = get_users(user_input)
        result = "Users found: {}".format(counter)
    # 直接传递原始users列表，而非jsonify生成的响应对象
    return render_template('users.html', result=result, users=users)

步骤2：修改前端模板，用tojson过滤器处理数据 #

{% extends "base.html" %}
{% block content %}
    <div class="container mt-5">
    <form method="POST" onsubmit="showLoading()" class="mb-3">
        <div class="input-group">
            <input type="text" name="user_input" class="form-control">
            <button type="submit" class="btn btn-primary">Submit</button>
        </div>
    </form>
    <h3 id="loading" style="display: none;">Loading . . .</h3>
    {% if result %}
        <h3>{{ result }}</h3>
        <h4>They are:</h4>
        <table id="data" class="table table-striped">
            <thead>
            <tr>
                <th>First</th>
                <th>Last</th>
                <th>Email</th>
            </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    {% endif %}
{% endblock %}

{% block scripts %}
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.datatables.net/v/bs5/jq-3.7.0/dt-1.13.8/r-2.5.0/datatables.min.js"></script>
    <script>
        $(document).ready(function () {
            {% if users %}
                // 使用Flask内置的tojson过滤器安全转换Python对象为JSON
                var userList = {{ users|tojson }};
                $('#data').DataTable({
                    data: userList,
                    columns: [
                        {data: 'First'},
                        {data: 'Last'},
                        {data: 'Email'}
                    ],
                });
            {% endif %}
        });
    </script>
{% endblock %}

关键说明 #

• tojson过滤器会自动处理Python数据到JSON的转换，同时处理引号转义、特殊字符等问题，生成合法的JS对象。
• 增加{% if users %}判断，避免无数据时执行DataTables初始化代码，减少不必要的错误。

内容的提问来源于stack exchange，提问作者Brandon