在Jade模板展示SQLite数据遇空白页，需添加分页与搜索

我尝试将SQLite数据库中的所有数据展示到Jade模板中，目前已能在模板内显示数据库的所有表列表，但无法展示表内数据，页面仅呈现空白。此外，由于数据量较大，我还需要为该功能添加分页和搜索筛选功能。

table_view.js 代码 #

var sqlite3 = require('sqlite3').verbose();
var db;

exports.get = function(req, res){
console.log("Serving " + __filename);

    var db_name = req.params.db_resource;
var table = req.params.table;

var dbpath = 'databases/' + db_name;
db = new sqlite3.Database(dbpath, function(err){
    if (err) res.render('database/db_edit', {message: 'Error: ' + err});    
});

db.all(" select * from " + table, function(err, rows) {
    
    var message = rows.length > 0 ? "Viewing " + db_name + '/' + table : "No data found in table '" + table + "' in " + db_name;
    
    res.render('database/table_view', {message: message, rows: rows});
    db.close();
});

};

Jade 文件代码 #

extends ../layout

block content
h1= message

    h3 Data
table
  - for (var r in rows)
      tr
        td= rows[r].id
        td= rows[r].some_text

br

一、解决表数据不显示问题 #

1. 补全错误捕获逻辑
   当前db.all回调未处理查询错误，若SQL执行失败，rows会是undefined，直接导致Jade遍历出错页面空白。修改代码：

db.all(" select * from " + table, function(err, rows) {
    if (err) {
        return res.render('database/db_edit', {message: '查询错误: ' + err});
    }
    var message = rows.length > 0 ? "Viewing " + db_name + '/' + table : "No data found in table '" + table + "' in " + db_name;
    res.render('database/table_view', {message: message, rows: rows});
    db.close();
});

2. 修正Jade遍历方式
   for...in遍历数组可能会读取到原型链上的额外属性，改用forEach更安全：

table
  - rows.forEach(function(row) {
      tr
        td= row.id
        td= row.some_text
  - })

3. 验证字段匹配
   确认目标数据表中存在id和some_text字段，若字段名不匹配会显示空白。可在db.all回调中添加console.log(rows)输出数据结构，核对字段名称。

4. 检查数据库路径
   确认databases/目录存在，且db_name对应的数据库文件可读。

二、添加分页和搜索筛选功能 #

1. 搜索筛选实现

• 修改路由接收搜索参数，绑定参数避免SQL注入：

var search = req.query.search || '';
var query = "SELECT * FROM " + table;
var params = [];

if (search) {
    query += " WHERE id LIKE ? OR some_text LIKE ?";
    params = [`%${search}%`, `%${search}%`];
}

db.all(query, params, function(err, rows) {
    // 后续渲染逻辑
});

• 在Jade模板中添加搜索表单：

form(method="get")
  input(type="text" name="search" placeholder="输入关键词搜索..." value=req.query.search)
  button(type="submit") 搜索

2. 分页功能实现

• 接收分页参数，计算偏移量：

var page = parseInt(req.query.page) || 1;
var limit = parseInt(req.query.limit) || 10;
var offset = (page - 1) * limit;

• 先查询总条数，再分页获取数据：

// 查询总条数
var countQuery = "SELECT COUNT(*) AS total FROM " + table + (search ? " WHERE id LIKE ? OR some_text LIKE ?" : "");
db.get(countQuery, params, function(err, countRes) {
    if (err) {
        return res.render('database/db_edit', {message: '统计错误: ' + err});
    }
    var total = countRes.total;
    var totalPages = Math.ceil(total / limit);

    // 查询当前页数据
    var dataQuery = countQuery.replace("COUNT(*) AS total", "*") + " LIMIT ? OFFSET ?";
    var pageParams = [...params, limit, offset];

    db.all(dataQuery, pageParams, function(err, rows) {
        if (err) {
            return res.render('database/db_edit', {message: '查询错误: ' + err});
        }
        res.render('database/table_view', {
            message: rows.length > 0 ? `查看 ${db_name}/${table} (第${page}/${totalPages}页)` : "无数据",
            rows: rows,
            currentPage: page,
            totalPages: totalPages,
            search: search,
            limit: limit
        });
        db.close();
    });
});

• 在Jade模板中添加分页导航：

div.pagination
  - if (currentPage > 1)
    a(href=`?page=${currentPage-1}&limit=${limit}&search=${search}`) 上一页
  - for (var i = 1; i <= totalPages; i++)
    a(href=`?page=${i}&limit=${limit}&search=${search}`)= i
  - if (currentPage < totalPages)
    a(href=`?page=${currentPage+1}&limit=${limit}&search=${search}`) 下一页

内容的提问来源于stack exchange，提问作者Muhammad Ahsan Shamim