Bootstrap-table: doesn’t work creating table from JavaScript

I’m creating a table from my index.js for the index.ejs to show some data from the database (SQL Server) but in the view the table doesn’t show any data or some error. The function from ‘api/pedidos’ does return me the query in JSON format.

I think the problem is in how a create the Table in index.js but i can’t recognize it.

This is the function from my api file:

router.get('/pedidos', async (req, res) => {
    try{
        // connect to your database
        sql.connect(config, (err) => {
            if (err) console.log(err);
            // create Request object
            let request = new sql.Request();
            // query to the database and get the records
            request.query("SELECT * FROM pedidos", (err, rows) => {
                if (err) console.log(err);
                
                //console.log(rows.recordset);
                // send records as a response
                res.send(rows.recordset);
            });
        });
    }catch(e){
        res.status(500).send({
            message: 'Error Inesperado:' + e.message
        });
    }
});

And this is how i create the table in index.js:

window.addEventListener('load', () => {

    const tabla = document.querySelector("#tabla");
    tabla.innerHTML =   '<table '+
                            'id="table" class="table table-striped table-dark" '+
                            'data-toggle="table" '+
                            '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('refresh');
    const table = document.querySelector("#table");
    table.classList.add("table-sm");

});

And this is the view, doesn’t show any data and the browser console doesn’t show any errors:

Answer

I try with this example How to fill bootstrap table via bootstrapTable()? and it works for me using $(‘#table’).bootstrapTable({data: data});. I didn’t have the data parse to JSON because my data is already in JSON format.

Thanks to @Shmack for providing the solution.

Advertisement

Answer