Flask集成DataTables无数据显示问题排查求助

我在实现CSV文件上传后跳转至/training页面、通过DataTables展示数据的功能时遇到问题：DataTables未显示任何数据，但终端执行print(data)能看到数据。以下是我的Flask后端代码和前端模板代码，请求排查代码中的错误。

Flask后端代码 #

from flask import Flask, render_template, request, session, send_from_directory
from werkzeug.utils import secure_filename
from utils_process import text_preprocessing

app = Flask(__name__)

@app.route('/training', methods=['GET','POST'])
def training():
global data
if request.method == 'POST':
    uploaded_df = request.files['file']
    data_filename = secure_filename(uploaded_df.filename)
    uploaded_df.save(os.path.join(app.config['UPLOAD_FOLDER'], data_filename))
    session['uploaded_data_file_path'] = os.path.join(app.config['UPLOAD_FOLDER'], data_filename)
    filepath = session['uploaded_data_file_path']

    dict_data = []
    with open(filepath, encoding="utf8") as file:
        csv_file = csv.DictReader(file)
        for row in csv_file:
            dict_data.append(row)

    data = []
    for row in dict_data:
        row['text_clean'] = text_preprocessing(row['content'])    
        
        data.append({
            'content': row['content'],
            'text_clean': row['text_clean'],
            'rating': row['rating'],
            'sistem': row['sistem'],
            'layanan': row['layanan'],
            'transaksi': row['transaksi'],
            'pendaftaran_subsidi': row['pendaftaran subsidi'],
            'kebermanfaatan': row['kebermanfaatan']
        })
    print(data)
return render_template('training.html', data=json.dumps(data))

if __name__ == '__main__':
   app.run(debug=True)

前端模板代码 #

{% extends "layout.html" %}
{% block content %}
<div class="container">
   <div class="p-5 bg-white rounded shadow mb-5">
    <table id='trainingTable' class='display dataTable' width='100%'>
        <thead>
        <tr>
            <th>Content</th>
            <th>Text Clean</th>
            <th>Rating</th>
            <th>Sistem</th>
            <th>Layanan</th>
            <th>Transaksi</th>
            <th>Pendaftaran Subsidi</th>
            <th>Kebermanfaatan</th>
        </tr>
        </thead>
    </table>
  </div>

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
<script>
  $(document).ready(function() {
    $('#trainingTable').DataTable({
        'ajax': {
            'url':'/training',
            'dataType': 'json',
        },
        searching: true,
        sort: true,
        scrollY: 200,
        scrollX: true,
        'columns': [
            { data: 'content' },
            { data: 'text_clean' },
            { data: 'rating' },
            { data: 'sistem' },
            { data: 'layanan' },
            { data: 'transaksi' },
            { data: 'pendaftaran_subsidi' },
            { data: 'kebermanfaatan' },
        ]
    });
});
 
</script>

{% endblock %}

效果截图 #

DataTables显示结果：

终端打印数据截图：

错误排查与修复方案 #

1. Flask后端核心问题 #

• 缺失必要模块导入：代码使用了csv、os、json模块但未导入，需添加：

  import csv
  import os
  import json
  

• 未配置上传目录：未设置UPLOAD_FOLDER配置项，需在初始化app后添加：

  app.config['UPLOAD_FOLDER'] = 'uploads'
  os.makedirs(app.config['UPLOAD_FOLDER'], exist_ok=True)  # 自动创建目录
  

• 请求逻辑混乱：当前路由在POST请求时处理数据，但DataTables发起GET请求时，后端返回的是HTML页面而非JSON数据，需区分请求类型：

  @app.route('/training', methods=['GET','POST'])
  def training():
      data = []
      if request.method == 'POST':
          # 保留原POST处理逻辑
          uploaded_df = request.files['file']
          data_filename = secure_filename(uploaded_df.filename)
          uploaded_df.save(os.path.join(app.config['UPLOAD_FOLDER'], data_filename))
          session['uploaded_data_file_path'] = os.path.join(app.config['UPLOAD_FOLDER'], data_filename)
          filepath = session['uploaded_data_file_path']
  
          dict_data = []
          with open(filepath, encoding="utf8") as file:
              csv_file = csv.DictReader(file)
              for row in csv_file:
                  dict_data.append(row)
  
          for row in dict_data:
              row['text_clean'] = text_preprocessing(row['content'])    
              data.append({
                  'content': row['content'],
                  'text_clean': row['text_clean'],
                  'rating': row['rating'],
                  'sistem': row['sistem'],
                  'layanan': row['layanan'],
                  'transaksi': row['transaksi'],
                  'pendaftaran_subsidi': row['pendaftaran subsidi'],
                  'kebermanfaatan': row['kebermanfaatan']
              })
          print(data)
      # 判断是否为AJAX请求，返回JSON；否则返回页面
      if request.headers.get('X-Requested-With') == 'XMLHttpRequest':
          return json.dumps(data)
      return render_template('training.html', data=json.dumps(data))
  

• 缺失Session秘钥：使用session必须设置秘钥，添加：

  app.secret_key = 'your-random-secret-key'  # 生产环境用随机生成的秘钥
  

2. 前端DataTables问题 #

方案一：直接注入数据（更简单）

去掉前端的ajax配置，直接使用后端注入的data变量：

<script>
  $(document).ready(function() {
    $('#trainingTable').DataTable({
        data: {{ data|safe }},
        searching: true,
        sort: true,
        scrollY: 200,
        scrollX: true,
        'columns': [
            { data: 'content' },
            { data: 'text_clean' },
            { data: 'rating' },
            { data: 'sistem' },
            { data: 'layanan' },
            { data: 'transaksi' },
            { data: 'pendaftaran_subsidi' },
            { data: 'kebermanfaatan' },
        ]
    });
  });
</script>

方案二：拆分JSON接口（更规范）

新增专门的路由返回JSON数据：

@app.route('/training/data')
def training_data():
    filepath = session.get('uploaded_data_file_path')
    if not filepath:
        return json.dumps([])
    # 重新读取并处理数据
    dict_data = []
    with open(filepath, encoding="utf8") as file:
        csv_file = csv.DictReader(file)
        for row in csv_file:
            dict_data.append(row)
    data = []
    for row in dict_data:
        row['text_clean'] = text_preprocessing(row['content'])    
        data.append({
            'content': row['content'],
            'text_clean': row['text_clean'],
            'rating': row['rating'],
            'sistem': row['sistem'],
            'layanan': row['layanan'],
            'transaksi': row['transaksi'],
            'pendaftaran_subsidi': row['pendaftaran subsidi'],
            'kebermanfaatan': row['kebermanfaatan']
        })
    return json.dumps(data)

修改前端ajax的URL：

'ajax': {
    'url':'/training/data',
    'dataType': 'json',
},

3. 其他细节检查 #

• 确保CSV文件的列名与代码中读取的content、rating等键名完全一致，避免因键名不匹配导致数据缺失。
• 检查text_preprocessing函数是否正常返回数据，无异常报错。

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