layui問題之渲染數(shù)據(jù)表格時,僅出現(xiàn)10條數(shù)據(jù)的解決方法
一、問題
ajax獲取服務(wù)端數(shù)據(jù)之后,要動態(tài)渲染table,但數(shù)據(jù)僅僅數(shù)顯了10條,并沒有渲染所有的數(shù)據(jù)。
二、經(jīng)過
看一下表格需要的數(shù)據(jù),0-9條的數(shù)據(jù)都自動有一個名為LAY_TABLE_INDEX的鍵值對,但10條及之后的數(shù)據(jù)都沒有這個鍵值對。
很是納悶,這個表格不帶分頁功能,應(yīng)該不需要寫limit對數(shù)據(jù)進(jìn)行限制
table.render({ elem: '#orderTable' ,height: 400 ,cols: [[ //標(biāo)題欄 {field: 'status', title: "訂單狀態(tài)", width: 90} ,{field: 'orderSerialNumber', title: "訂單編號", minWidth: 150} ,{field: 'logisticsSerialNumber', title: "物流串號", minWidth: 150} ,{field: 'curPos', title: "當(dāng)前位置", minWidth: 150} ,{field: 'monitoringState', title: "監(jiān)控狀況", width: 140} ,{field: 'lastUpdated', title: "更新時間", width: 145, sort: true} ,{field: 'operating', title: "操作", minWidth: 220} ]] ,data: handleData ,even: true });
三、結(jié)果
看到官網(wǎng)上寫:limit 參數(shù)(默認(rèn):10)是與你服務(wù)端限定的數(shù)據(jù)條數(shù)一致。就把limit加上去了,并且和服務(wù)端數(shù)據(jù)條數(shù)一致。
table.render({ elem: '#orderTable' ,height: 400 ,cols: [[ //標(biāo)題欄 {field: 'status', title: "訂單狀態(tài)", width: 90} ,{field: 'orderSerialNumber', title: "訂單編號", minWidth: 150} ,{field: 'logisticsSerialNumber', title: "物流串號", minWidth: 150} ,{field: 'curPos', title: "當(dāng)前位置", minWidth: 150} ,{field: 'monitoringState', title: "監(jiān)控狀況", width: 140} ,{field: 'lastUpdated', title: "更新時間", width: 145, sort: true} ,{field: 'operating', title: "操作", minWidth: 220} ]] ,data: handleData ,even: true ,limit: limit //顯示的數(shù)量 });
注:handleData是渲染表格時,表格需要的數(shù)據(jù)
以上這篇layui問題之渲染數(shù)據(jù)表格時,僅出現(xiàn)10條數(shù)據(jù)的解決方法就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
- layui動態(tài)渲染生成select的option值方法
- layui動態(tài)渲染生成左側(cè)3級菜單的方法(根據(jù)后臺返回數(shù)據(jù))
- layui的布局和表格的渲染以及動態(tài)生成表格的方法
- 解決使用layui的時候form表單中的select等不能渲染的問題
- 淺談layui使用模板引擎動態(tài)渲染元素要注意的問題
- layui使用表格渲染獲取行數(shù)據(jù)的例子
- 解決layui 表單元素radio不顯示渲染的問題
- 使用layui 渲染table數(shù)據(jù)表格的實例代碼
- layui框架table 數(shù)據(jù)表格的方法級渲染詳解
- layUI ajax加載html頁面后重新渲染的方法
- 解決Layui當(dāng)中的導(dǎo)航條動態(tài)添加后渲染失敗的問題
相關(guān)文章
使用JavaScript實現(xiàn)改造layer彈層移動版組件
這篇文章主要為大家詳細(xì)介紹了使用JavaScript實現(xiàn)改造layer彈層移動版組件的相關(guān)知識,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-04-04javascript+canvas實現(xiàn)刮刮卡抽獎效果
這篇文章主要介紹了javascript+canvas實現(xiàn)刮刮卡抽獎效果的相關(guān)資料,需要的朋友可以參考下2015-07-07一文熟練掌握J(rèn)avaScript的switch用法
在JavaScript中switch語句是一種用于多條件分支的控制語句,下面這篇文章主要給大家介紹了關(guān)于如果通過一文熟練掌握J(rèn)avaScript的switch用法的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01