bootstrap table无法渲染后台返回的数据

Question

1. 问题描述：

（1）看过了bootstrap table从后台获取数据之后怎么显示数据这个问题之后，发现原来之前，我从后台返回的数据格式没有遵循{"total": dataNum, "rows": [{}]}这样的格式。但是现在我好像明明都已经转成正确格式的但是依然没有办法渲染表格。
（2）而且看过另一个问题bootstrap table 返回和官方一样格式的数据 在前端无法显示,再一看我是设置了服务端分页的，但是依然没有解决我的问题。

2. 相关代码：

前端js

function initTable(){

        $("#myProgress").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    

再附上后端相关代码：

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 ++)
                {
                    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. 报错截图：

4. 最后陈述：从控制台打印出来的就是我要渲染的数据，这样看完全是正确的它要的格式啊，但是我的table依然没有数据渲染出来。而且表格明明已经检测到我有两条数据了，但是就是不显示，请教！！！

Answer 1

我终于解决它了！！！
就是↓

$table.bootstrapTable({
    //省略一些属性设置...
    queryParams: function(params){
        var queryData = {};    //如果没有额外的查询参数的话就新建一个空对象，如果有的话就先装你的查询参数
        //然后增加这两个
        queryData.limit = params.limit;
        queryData.offset = params.offset;
        return queryData;    //这个就是向服务端传递的参数对象
    }
    //省略一些...
});

具体原因我也还没去细查，而且这个设置是因为我设置了服务端分页sidePagination: 'server'，所以queryParams的设置大概跟这个有关系。

Answer 2

刚刚准备说你设置了分页，但是没有传给服务器的数据，结果你自己发现了

Answer 3

JSON.parse()一下试试

Answer 4

我也遇到相同的问题，我解决的办法是把bootstraptable的相关属性都补全，在使用后台返回json数据时，不仅要用datatype,还要设置contenttype。下面是我的属性代码，设置完就可以显示了。

---

 $('#statistics_Table').bootstrapTable({
                        {#全部参数#}
                        url: "/get_data/",
                        dataType: "json",
                        method: 'get',                      //请求方式（*）
                        maintainSelected: true,               //设置为 true 在点击分页按钮或搜索按钮时，将记住checkbox的选择项
                        toolbar: '#toolbar',                //工具按钮用哪个容器
                        striped: true,                      //是否显示行间隔色
                        cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                        pagination: true,                   //是否显示分页（*）
                        sortable: true,                     //是否启用排序
                        sortOrder: "asc",                   //排序方式
                        {#queryParams: oTableInit.queryParams,//传递参数（*）#}
                        sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
                        pageNumber: 1,                       //初始化加载第一页，默认第一页
                        pageSize: 10,                       //每页的记录行数（*）
                        pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
                        search: true,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
                        strictSearch: false,                 //true为全匹配搜索，false为模糊搜索
                        showColumns: true,                  //是否显示所有的列
                        showRefresh: true,                  //是否显示刷新按钮
                        minimumCountColumns: 2,             //最少允许的列数
                        clickToSelect: true,                //是否启用点击选中行
                        {#height: 500,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度#}
                        uniqueId: "id",                     //每一行的唯一标识，一般为主键列
                        responseHandler: "",
                        showToggle: false,                    //是否显示详细视图和列表视图的切换按钮
                        cardView: false,                    //是否显示详细视图
                        detailView: false,                   //是否显示父子表
                        contentType: "application/x-www-form-urlencoded", //*************这个太重要了，如果没有这个，就算返回了正确的数据也无法加载
                        showExport: true,                    //是否显示