通过JavaScript创建Bootstrap-table无法加载SQL Server数据问题排查

核心问题：动态DOM元素未触发Bootstrap Table初始化 #

通过innerHTML动态插入表格HTML时，Bootstrap Table的自动初始化（依赖data-toggle="table"）不会触发——自动初始化仅在页面初始加载时扫描DOM。直接调用refresh方法也无效，因为表格还未完成初始化。

修复步骤 #

1. 移除自动初始化标记，手动触发表格初始化 #

删除data-toggle="table"属性，动态创建表格后手动调用bootstrapTable()完成初始化，该方法会自动请求data-url加载数据：

window.addEventListener('load', () => {
    const tabla = document.querySelector("#tabla");
    tabla.innerHTML =   '<table '+ 
                            'id="table" class="table table-striped table-dark" '+ 
                            'data-height="100%" '+ 
                            'data-pagination="true" '+ 
                            'data-page-size="5" '+ 
                            'data-search="true" '+ 
                            'data-locale="es-ES" '+ 
                            'data-url="/api/pedidos"> '+ 
                            '<thead> '+ 
                                '<tr> '+ 
                                '<th data-field="pedido" data-align="center">Pedido</th> '+ 
                                '<th data-field="cliente" data-align="center">Cliente</th> '+ 
                                '</tr> '+ 
                            '</thead> '+ 
                        '</table> ';

    // 手动初始化表格，自动加载接口数据
    $("#table").bootstrapTable();
    
    const table = document.querySelector("#table");
    table.classList.add("table-sm");
});

2. 验证接口返回字段与data-field严格匹配 #

确认/api/pedidos返回的JSON数据中，字段名和data-field完全一致（包括大小写）。例如接口返回必须是：

[
  {"pedido": "001", "cliente": "Juan Pérez"},
  {"pedido": "002", "cliente": "María López"}
]

若字段名是Pedido（首字母大写），而data-field设置为小写pedido，则无法匹配导致数据不显示。

3. 检查依赖加载顺序 #

确保页面按以下顺序加载资源：

• jQuery
• Bootstrap CSS
• Bootstrap JS
• Bootstrap Table CSS
• Bootstrap Table JS
  顺序错误会导致组件功能失效，且可能无控制台报错。

4. 添加回调调试数据加载状态 #

初始化表格时加入回调函数，确认数据是否成功获取：

$("#table").bootstrapTable({
    onLoadSuccess: function(data) {
        console.log("数据加载成功：", data);
    },
    onLoadError: function(status) {
        console.log("数据加载失败：", status);
    }
});

通过回调可快速定位是接口请求问题，还是数据匹配问题。

额外优化：API接口代码简化 #

原API使用嵌套回调，建议改用async/await风格，确保错误能被外层try/catch捕获：

router.get('/pedidos', async (req, res) => {
    try{
        await sql.connect(config);
        const request = new sql.Request();
        const result = await request.query("SELECT * FROM pedidos");
        res.send(result.recordset);
    }catch(e){
        console.error(e);
        res.status(500).send({
            message: 'Error Inesperado:' + e.message
        });
    }
});

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