快捷導(dǎo)航

layui問(wèn)題之渲染數(shù)據(jù)表格時(shí),僅出現(xiàn)10條數(shù)據(jù)的解決方法

更新時(shí)間：2019年09月12日 08:56:24 作者：柒仔不安

今天小編就為大家分享一篇layui問(wèn)題之渲染數(shù)據(jù)表格時(shí),僅出現(xiàn)10條數(shù)據(jù)的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

一、問(wèn)題

ajax獲取服務(wù)端數(shù)據(jù)之后，要?jiǎng)討B(tài)渲染table，但數(shù)據(jù)僅僅數(shù)顯了10條，并沒(méi)有渲染所有的數(shù)據(jù)。

二、經(jīng)過(guò)

看一下表格需要的數(shù)據(jù)，0-9條的數(shù)據(jù)都自動(dòng)有一個(gè)名為L(zhǎng)AY_TABLE_INDEX的鍵值對(duì)，但10條及之后的數(shù)據(jù)都沒(méi)有這個(gè)鍵值對(duì)。

很是納悶，這個(gè)表格不帶分頁(yè)功能，應(yīng)該不需要寫(xiě)limit對(duì)數(shù)據(jù)進(jìn)行限制

table.render({
    elem: '#orderTable'
    ,height: 400
    ,cols: [[ //標(biāo)題欄
     {field: 'status', title: "訂單狀態(tài)", width: 90}
     ,{field: 'orderSerialNumber', title: "訂單編號(hào)", minWidth: 150}
     ,{field: 'logisticsSerialNumber', title: "物流串號(hào)", minWidth: 150}
     ,{field: 'curPos', title: "當(dāng)前位置", minWidth: 150}
     ,{field: 'monitoringState', title: "監(jiān)控狀況", width: 140}
     ,{field: 'lastUpdated', title: "更新時(shí)間", width: 145, sort: true}
     ,{field: 'operating', title: "操作", minWidth: 220}
    ]]
    ,data: handleData
    ,even: true
   });

三、結(jié)果

看到官網(wǎng)上寫(xiě)：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: "訂單編號(hào)", minWidth: 150}
     ,{field: 'logisticsSerialNumber', title: "物流串號(hào)", minWidth: 150}
     ,{field: 'curPos', title: "當(dāng)前位置", minWidth: 150}
     ,{field: 'monitoringState', title: "監(jiān)控狀況", width: 140}
     ,{field: 'lastUpdated', title: "更新時(shí)間", width: 145, sort: true}
     ,{field: 'operating', title: "操作", minWidth: 220}
    ]]
    ,data: handleData
    ,even: true
    ,limit: limit //顯示的數(shù)量
   });

注：handleData是渲染表格時(shí)，表格需要的數(shù)據(jù)

以上這篇layui問(wèn)題之渲染數(shù)據(jù)表格時(shí),僅出現(xiàn)10條數(shù)據(jù)的解決方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

JS選中checkbox后獲取table內(nèi)一行TD所有數(shù)據(jù)的方法
這篇文章主要介紹了JS選中checkbox后獲取table內(nèi)一行TD所有數(shù)據(jù)的方法,涉及javascript針對(duì)table元素遍歷與獲取的技巧,需要的朋友可以參考下
2015-07-07
javascript實(shí)現(xiàn)依次輸入input自動(dòng)定焦
這篇文章主要介紹了javascript實(shí)現(xiàn)依次輸入input自動(dòng)定焦的方法及示例代碼，非常實(shí)用，這里推薦給小伙伴們
2014-12-12
JS驗(yàn)證輸入的是否是數(shù)字及保留幾位小數(shù)問(wèn)題
這篇文章主要介紹了JS驗(yàn)證輸入的是否是數(shù)字及保留幾位小數(shù)問(wèn)題，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
2018-05-05
一個(gè)JS的日期格式化算法示例
本文為大家介紹下一個(gè)JS的日期格式化算法，具體實(shí)現(xiàn)如下，感興趣的朋友可以參考下，希望對(duì)大家有所幫助
2013-07-07
基于javascript滾動(dòng)圖片具體實(shí)現(xiàn)
這篇文章主要介紹了javascript滾動(dòng)圖片具體實(shí)現(xiàn)，有需要的朋友可以參考一下
2013-11-11
postcss安裝和使用示例詳解
這篇文章主要介紹了postcss安裝和使用,通過(guò)這些深度集成,PostCSS不僅僅是一個(gè)簡(jiǎn)單的CSS處理工具,而是一種貫穿整個(gè)前端開(kāi)發(fā)流程的技術(shù)手段,大大提升了CSS開(kāi)發(fā)效率和產(chǎn)出質(zhì)量,隨著前端社區(qū)的發(fā)展,PostCSS的功能和應(yīng)用場(chǎng)景也會(huì)更加豐富多元,需要的朋友可以參考下
2024-03-03
前端小知識(shí)之??=?操作符更簡(jiǎn)潔的默認(rèn)值處理方式
這篇文章主要介紹了前端小知識(shí)之??=?操作符更簡(jiǎn)潔的默認(rèn)值處理方式的相關(guān)資料,??=操作符是JavaScript中用于設(shè)置默認(rèn)值的新操作符,它僅在變量值為null或undefined時(shí)才賦值,需要的朋友可以參考下
2024-11-11
async/await實(shí)現(xiàn)Promise.all()的方式
Promise.all() 方法接收一個(gè) promise 的 iterable 類(lèi)型的輸入，并且只返回一個(gè)Promise實(shí)例，并且輸入的所有 promise 的 resolve 回調(diào)的結(jié)果是一個(gè)數(shù)組，對(duì)async/await實(shí)現(xiàn)Promise.all()相關(guān)知識(shí)感興趣的朋友一起看看吧
2022-12-12
javascript日期字符串轉(zhuǎn)換為時(shí)間戳的5種方法總結(jié)
在JavaScript中將日期字符串轉(zhuǎn)換為時(shí)間戳是一個(gè)常見(jiàn)需求,本文介紹了五種實(shí)現(xiàn)此轉(zhuǎn)換的方法,包括使用Date對(duì)象、正則表達(dá)式輔助解析、Date.parse()函數(shù)以及第三方庫(kù)如moment.js和date-fns,這些方法適用于不同格式的日期字符串,需要的朋友可以參考下
2024-09-09
LayUi數(shù)據(jù)表格自定義賦值方式
今天小編就為大家分享一篇LayUi數(shù)據(jù)表格自定義賦值方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-10-10