在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問(wèn)答/HTML/ bootstrap table無(wú)法渲染后臺(tái)返回的數(shù)據(jù)

bootstrap table無(wú)法渲染后臺(tái)返回的數(shù)據(jù)

1. 問(wèn)題描述:

(1)看過(guò)了bootstrap table從后臺(tái)獲取數(shù)據(jù)之后怎么顯示數(shù)據(jù)這個(gè)問(wèn)題之后,發(fā)現(xiàn)原來(lái)之前,我從后臺(tái)返回的數(shù)據(jù)格式?jīng)]有遵循{"total": dataNum, "rows": [{}]}這樣的格式。但是現(xiàn)在我好像明明都已經(jīng)轉(zhuǎn)成正確格式的但是依然沒(méi)有辦法渲染表格。
(2)而且看過(guò)另一個(gè)問(wèn)題bootstrap table 返回和官方一樣格式的數(shù)據(jù) 在前端無(wú)法顯示,再一看我是設(shè)置了服務(wù)端分頁(yè)的,但是依然沒(méi)有解決我的問(wèn)題。

2. 相關(guān)代碼:

前端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,                    //是否顯示詳細(xì)視圖和列表視圖
             rowStyle: rowStyles,                //行樣式
             pagination: true,                    //啟用分頁(yè)
             pageNumber: 1,                        //初始化加載第一頁(yè),默認(rèn)第一頁(yè)
             pageSize: 10,                        //每頁(yè)的記錄行數(shù)
             pageList: [10,20,50],                //可供選擇的每頁(yè)行數(shù)
             sidePagination: "server",
             
             onLoadSuccess: function(result)
             {
                 console.log("result: "+result);
             },
             onLoadError: function(err)
             {
                 console.log("error: "+err);
             },
             columns: [
             {
                 field: "index",
                 title: "序號(hào)",
                 align: "center",
                 formatter: runningFormatter
             },
             {
                 field: "id",
                 title: "學(xué)號(hào)",
                 align: "center"
             },
             {
                 field: "name",
                 title: "姓名",
                 align: "center"
             },
             {
                 field: "dormitory",
                 title: "宿舍樓",
                 align: "center"
             },
             {
                 field: "room",
                 title: "房間號(hào)",
                 align: "center"
             },
             {
                 field: "item",
                 title: "業(yè)務(wù)項(xiàng)目",
                 align: "center"
             },
             {
                 field: "operation",
                 title: "操作",
                 align: "center"
                 // ,formatter: operateFormatter,
                 // events: window.operateEvents
             }]
         });//end-bootstrapTable


}//end-initTable    
再附上后端相關(guān)代碼:
router.get("/studentRole/myProgress", function(req, res, next)
{
    //取得當(dāng)前用戶,以便從數(shù)據(jù)庫(kù)查看是否有該用戶的操作記錄
    var userInfo = JSON.parse(req.cookies.get('userInfo'));
    //!!!new
    var result = {"total": "", "rows": []};    //存儲(chǔ)返回給前端的數(shù)據(jù)

    //取學(xué)號(hào)去數(shù)據(jù)庫(kù)匹配申請(qǐng)記錄
    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: "申請(qǐng)入住"});
                result.total = result.rows.length;
            }//end-if
        }//end-if(!err)
      
    });//end-Apply.findOne

    //取學(xué)號(hào)去數(shù)據(jù)庫(kù)匹配報(bào)修記錄
    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: "報(bào)修" });
                }
                //更新total的值
                result.total = result.rows.length;
                res.json(result);
                return;
            }
        }
       
    });//end-Fix.find


});//end-業(yè)務(wù)進(jìn)度

3. 報(bào)錯(cuò)截圖:

clipboard.png

4. 最后陳述:從控制臺(tái)打印出來(lái)的就是我要渲染的數(shù)據(jù),這樣看完全是正確的它要的格式啊,但是我的table依然沒(méi)有數(shù)據(jù)渲染出來(lái)。而且表格明明已經(jīng)檢測(cè)到我有兩條數(shù)據(jù)了,但是就是不顯示,請(qǐng)教?。?!

回答
編輯回答
離魂曲

JSON.parse()一下試試

2017年11月21日 00:01
編輯回答
替身

剛剛準(zhǔn)備說(shuō)你設(shè)置了分頁(yè),但是沒(méi)有傳給服務(wù)器的數(shù)據(jù),結(jié)果你自己發(fā)現(xiàn)了

2018年5月10日 17:27
編輯回答
單眼皮

我終于解決它了?。?!
就是↓

$table.bootstrapTable({
    //省略一些屬性設(shè)置...
    queryParams: function(params){
        var queryData = {};    //如果沒(méi)有額外的查詢參數(shù)的話就新建一個(gè)空對(duì)象,如果有的話就先裝你的查詢參數(shù)
        //然后增加這兩個(gè)
        queryData.limit = params.limit;
        queryData.offset = params.offset;
        return queryData;    //這個(gè)就是向服務(wù)端傳遞的參數(shù)對(duì)象
    }
    //省略一些...
});

具體原因我也還沒(méi)去細(xì)查,而且這個(gè)設(shè)置是因?yàn)槲以O(shè)置了服務(wù)端分頁(yè)sidePagination: 'server',所以queryParams的設(shè)置大概跟這個(gè)有關(guān)系。

2018年6月26日 08:35