Bootstrap table cannot render the data returned by the background

1. Problem description:

(1) after looking at the question of bootstrap table how to display the data after getting the data from the background , I found that the format of the data I returned from the background did not follow the format of {" total ": dataNum," rows ": [{}]}. But now I seem to have been converted to the correct format, but there is still no way to render the table.
(2) and have seen another problem bootstrap table returns data in the same format as the official data cannot be displayed at the front end , and then I see that I have set up server paging, but it still does not solve my problem.

2. Related code:

Front-end js
function initTable(){

        $("-sharpmyProgress").bootstrapTable({

            url: "api/studentRole/myProgress",
            method: "get",
            // dataType: "json",
            // contentType: "application/json; charset=utf-8",
            // contentType: "application/x-www-form-urlencoded",
            cache: false,                        //
            showColumns: true,                  //
            showRefresh: true,                  //
            showToggle:true,                    //
             rowStyle: rowStyles,                //
             pagination: true,                    //
             pageNumber: 1,                        //
             pageSize: 10,                        //
             pageList: [10,20,50],                //
             sidePagination: "server",
             
             onLoadSuccess: function(result)
             {
                 console.log("result: "+result);
             },
             onLoadError: function(err)
             {
                 console.log("error: "+err);
             },
             columns: [
             {
                 field: "index",
                 title: "",
                 align: "center",
                 formatter: runningFormatter
             },
             {
                 field: "id",
                 title: "",
                 align: "center"
             },
             {
                 field: "name",
                 title: "",
                 align: "center"
             },
             {
                 field: "dormitory",
                 title: "",
                 align: "center"
             },
             {
                 field: "room",
                 title: "",
                 align: "center"
             },
             {
                 field: "item",
                 title: "",
                 align: "center"
             },
             {
                 field: "operation",
                 title: "",
                 align: "center"
                 // ,formatter: operateFormatter,
                 // events: window.operateEvents
             }]
         });//end-bootstrapTable


}//end-initTable    
and attach the relevant back-end code:
router.get("/studentRole/myProgress", function(req, res, next)
{
    //
    var userInfo = JSON.parse(req.cookies.get("userInfo"));
    //!!!new
    var result = {"total": "", "rows": []};    //

    //
    Apply.findOne({sid: userInfo.username}, function(err, docs)
    {
        if(!err)
        {
            if(docs != "" && docs != null)
            {
                result.rows.push({id: docs.sid, name: docs.name, dormitory: docs.dormitory, room: docs.room, item: ""});
                result.total = result.rows.length;
            }//end-if
        }//end-if(!err)
      
    });//end-Apply.findOne

    //
    Fix.find({id: userInfo.username}, function(err, doc)
    {
        if(!err)
        {
            if(doc != "" && doc != null)
            {

                for(let i = 0; i < doc.length; i PP)
                {
                    result.rows.push({id: doc[i].id, name: doc[i].name, dormitory: doc[i].building, room: doc[i].room, item: "" });
                }
                //total
                result.total = result.rows.length;
                res.json(result);
                return;
            }
        }
       
    });//end-Fix.find


});//end-

3. Screenshot of error report:

clipboard.png

4. Final statement: what is printed from the console is the data I want to render, which looks exactly the right format, but my table still has no data to render. And the form has clearly detected that I have two pieces of data, but it does not show, please ask!


I finally solved it!
is the answer

$table.bootstrapTable({
    //...
    queryParams: function(params){
        var queryData = {};    //
        //
        queryData.limit = params.limit;
        queryData.offset = params.offset;
        return queryData;    //
    }
    //...
});

I haven't checked the specific reasons yet, and this setting is because I set server pagination sidePagination: 'server' , so the setting of queryParams probably has something to do with this.


was just about to say that you set up paging but did not send the data to the server. As a result, you found


JSON.parse () give it a try


I have the same problem. My solution is to complete all the relevant properties of bootstraptable. When using the background to return json data, not only use datatype, but also set contenttype. The following is my property code, which can be displayed after setting it up.

< hr >
 $('-sharpstatistics_Table').bootstrapTable({
                        {-sharp-sharp}
                        url: "/get_data/",
                        dataType: "json",
                        method: 'get',                      //*
                        maintainSelected: true,               // true checkbox
                        toolbar: '-sharptoolbar',                //
                        striped: true,                      //
                        cache: false,                       //true*
                        pagination: true,                   //*
                        sortable: true,                     //
                        sortOrder: "asc",                   //
                        {-sharpqueryParams: oTableInit.queryParams,//*-sharp}
                        sidePagination: "server",           //:clientserver*
                        pageNumber: 1,                       //
                        pageSize: 10,                       //*
                        pageList: [10, 25, 50, 100],        //*
                        search: true,                       //
                        strictSearch: false,                 //truefalse
                        showColumns: true,                  //
                        showRefresh: true,                  //
                        minimumCountColumns: 2,             //
                        clickToSelect: true,                //
                        {-sharpheight: 500,                        //height-sharp}
                        uniqueId: "id",                     //
                        responseHandler: "",
                        showToggle: false,                    //
                        cardView: false,                    //
                        detailView: false,                   //
                        contentType: "application/x-www-form-urlencoded", //*************
                        showExport: true,                    //
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b30aa3-2b4ad.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b30aa3-2b4ad.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?