Flask+ajax实现点击按钮刷新datatable

为了使用Flask和AJAX来实现按钮点击刷新DataTable，你需要执行以下步骤：

创建一个Flask服务器来处理AJAX请求和渲染模板。
在前端使用AJAX发送请求到Flask服务器。
服务器处理请求，并返回DataTable所需的数据。
前端接收到数据后，使用JavaScript更新DataTable。

以下是实现上述功能的示例代码：

Flask (Python):




from flask import Flask, render_template, request, jsonify
import json
 
app = Flask(__name__)
 
@app.route('/')
def index():
    return render_template('index.html')
 
@app.route('/get_data', methods=['POST'])
def get_data():
    # 假设这是从数据库或其他来源获取的数据
    data = [
        {'name': 'Alice', 'age': 25, 'city': 'New York'},
        {'name': 'Bob', 'age': 30, 'city': 'Paris'},
        # ...更多数据
    ]
    return jsonify(data)
 
if __name__ == '__main__':
    app.run(debug=True)

HTML (Jinja2):




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DataTable Example</title>
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
</head>
<body>
 
<button id="refresh-btn">刷新表格</button>
<table id="data-table" style="width:100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>City</th>
        </tr>
    </thead>
</table>
 
<script>
$(document).ready(function() {
    var table = $('#data-table').DataTable();
 
    $('#refresh-btn').click(function() {
        $.ajax({
            url: '/get_data',
            type: 'POST',
            dataType: 'json',
            success: function(data) {
                table.clear();
                for (var i = 0; i < data.length; i++) {
                    table.row.add([
                        data[i].name,
                        data[i].age,
                        data[i].city
                    ]).draw();
                }
            }
        });
    });
});
</script>
 
</body>
</html>

在这个例子中，当按钮被点击时，AJAX请求被发送到Flask服务器的 /get_data 路由。服务器收到请求后，处理并返回JSON格式的数据。前端收到数据后，使用DataTable的API清空并添加新的行，从而刷新表格。

确保你的Flask服务器运行正常，并且在浏览器中访问对应的网址，你将看到一个按钮和一个DataTable。点击按钮将通过AJAX请求刷新表格数据。

Flask+ajax实现点击按钮刷新datatable

评论已关闭

推荐阅读