javascript - 在 Flask 后端中使用另一个 sql 查询选中的复选框重新生成表

Question

我在为我的网络界面寻找正确的解决方案时遇到问题:我有一个使用数据表框架创建的表。在后端 Flask 上

默认情况下，表是通过查询从 Mysql DB 填充的 SELECT * FROM test_table WHERE status != 'OK'

但我想添加一个名为显示所有记录的复选框。通过选中此复选框，后端应使用另一个查询来填充SELECT * FROM test_table基本上，选择所有内容。

Javascript代码:

$('#main_table').DataTable({
    "processing": true,
    "ajax": {
        "url": "/index_get_data",
        "dataType": "json",
        "dataSrc": "data",
        "contentType": "application/json"
    },
    "columns": [{
            "data": "id"
        }, {
            "data": "version"
        }
    ]
});

Flask 中的 Python

@app.route('/index')
@app.route('/')
def index():
   return render_template('index.html')

@app.route('/index_get_data')
def main_info():
    if query_all is not None:
        sql_query = "SELECT * FROM test_table "
    else:
        sql_query = "SELECT * FROM test_table WHERE status != 'OK'"
    conn = mysql.connect()
    cursor = conn.cursor()
    cursor.execute(sql_query)
    conn.close()
    row_headers = [x[0] for x in cursor.description]
    rv = cursor.fetchall()
    json_data = []
    for result in rv:
        json_data.append(dict(zip(row_headers, result)))
    return_data = {'data': json_data}
    return json.dumps(return_data, indent=4, sort_keys=True, default=str)

捕获复选框检查事件的Javascript函数

const checkbox = document.getElementById('chkBox')
    checkbox.addEventListener('change', (event) => {
        if (event.target.checked) {
            $.post("/select_all", {
                select_all: "True"
            });
        }
    })

不幸的是，我被困住了。我找不到使用非默认查询重新加载页面的正确方法。...

Answer 1

郑重声明，您可以完全在客户端实现该功能，方法是在表初始化时加载完整数据集，隐藏列“status”并执行 search('OK')/在显示所有记录未选中/选中时针对该列进行search('')。

但是，如果 status = 'OK' 记录仅占数据集的最少部分，并且并不经常需要整个记录列表，那么在服务器端执行此操作确实会更快。

为此，您只需触发 ajax.reload()从 POST 成功回调中针对您的表:

const checkbox = document.getElementById('chkBox')
    checkbox.addEventListener('change', (event) => {
        if (event.target.checked) {
            $.post("/select_all", {
                select_all: "True",
                success: () => $('#main_table').DataTable().ajax.reload()
            });
        }
    })