jquerydatatables插件自定義ajax分頁(yè)實(shí)例解析_jquery

《jquerydatatables插件自定義ajax分頁(yè)實(shí)例解析_jquery》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在工程資料-天天文庫(kù)。

1、jQueryDataTables插件自定義Ajax分頁(yè)實(shí)例解析一、問(wèn)題描述園友是做前端的，產(chǎn)品經(jīng)理要求他使用jQueryDataTables插件顯示一個(gè)列表，要實(shí)現(xiàn)分類(lèi)效果。后端的分頁(yè)接口已經(jīng)寫(xiě)好了，不涉及條件查詢，需要傳入頁(yè)碼(pageNo)和頁(yè)面顯示數(shù)據(jù)條數(shù)(pageSize),顯示相應(yīng)頁(yè)的顯示記錄，且不能修改后端接口。二、分析先來(lái)分析下分頁(yè)實(shí)現(xiàn)。一是后端分頁(yè)：這種情況下，在后端很容易實(shí)現(xiàn)，在官網(wǎng)上冇示例，不多說(shuō)明。二是前端分頁(yè):前端分頁(yè)也是支持的，不過(guò)需要一次把所有數(shù)據(jù)都獲取到才可以。看到這里，問(wèn)題來(lái)了。由于后端在目前的情況下是更改不了，只能在前端實(shí)現(xiàn)。但是，現(xiàn)

2、在又不滿足前端分頁(yè)的條件：一次性獲取所有數(shù)據(jù)(現(xiàn)在后端數(shù)據(jù)接II只能返回相應(yīng)頁(yè)碼的數(shù)據(jù))。介于目前的情況，獲取的數(shù)據(jù)只有一頁(yè)，沒(méi)有所有的頁(yè)碼。試試能不能偽裝一下后端分頁(yè)的情況，就是開(kāi)啟后端分頁(yè)，在請(qǐng)求之前，將傳入的數(shù)據(jù)進(jìn)行重組，在獲取到數(shù)據(jù)后，將返回的數(shù)據(jù)按照后端分頁(yè)的數(shù)據(jù)格式經(jīng)過(guò)測(cè)試，是可以的。三、實(shí)現(xiàn)通過(guò)DataTables配置參數(shù)ajax項(xiàng)實(shí)現(xiàn)的。關(guān)于ajax詳細(xì)介紹請(qǐng)看官方說(shuō)明:中文丨英文ajax接收三種類(lèi)型的參數(shù)：^string：設(shè)置獲取數(shù)據(jù)的url^object：和jQuery.ajax定義類(lèi)似^function：口定義獲取數(shù)據(jù)的功能直接上代碼吧，都有注釋

3、。前端頁(yè)面代碼:

4、.css"rcl二〃stylesheet"mcdia=/zscrccn">JQueryDataTables插件自定義分頁(yè)Ajax實(shí)現(xiàn)

5、le-hovertable-condensed"cel1spacing二〃0〃width=，，100%，，>〈th>編號(hào)〈th>姓名〈th>性別