前端js實(shí)現(xiàn)分頁(yè)的思路 Ajax讀取數(shù)據(jù)之分頁(yè)顯示篇實(shí)現(xiàn)代碼?
Ajax讀取數(shù)據(jù)之分頁(yè)顯示篇實(shí)現(xiàn)代碼?當(dāng)Ajax請(qǐng)求時(shí),首先向后臺(tái)發(fā)送一個(gè)頁(yè)值,表示當(dāng)前的頁(yè)碼,然后后臺(tái)根據(jù)頁(yè)值和pagecount(pagecount每頁(yè)顯示多少條記錄)(page-1)*pagec
Ajax讀取數(shù)據(jù)之分頁(yè)顯示篇實(shí)現(xiàn)代碼?
當(dāng)Ajax請(qǐng)求時(shí),首先向后臺(tái)發(fā)送一個(gè)頁(yè)值,表示當(dāng)前的頁(yè)碼,然后后臺(tái)根據(jù)頁(yè)值和pagecount(pagecount每頁(yè)顯示多少條記錄)(page-1)*pagecount<rownum<page*pagecount)查詢相應(yīng)的記錄數(shù),將記錄集封裝為一個(gè)對(duì)象,作為Ajax請(qǐng)求的返回值,在success return value函數(shù)中解析,動(dòng)態(tài)添加HTML表記錄
B站搜索結(jié)果分頁(yè)實(shí)質(zhì)是點(diǎn)擊分頁(yè)鏈接,通過Ajax獲取服務(wù)器JSON數(shù)據(jù),然后在頁(yè)面上顯示,只是頁(yè)面沒有我還用了HTML5支持window.history.pushState和onpopstate更改地址欄中的鏈接(pjax也使用此功能)。
同時(shí),將click事件綁定到分頁(yè)鏈接。當(dāng)用戶點(diǎn)擊時(shí),鏈接將被阻止,Ajax請(qǐng)求將被啟動(dòng)以獲取頁(yè)面數(shù)據(jù),從而優(yōu)化用戶體驗(yàn)。最后,有一個(gè)考慮到SEO和用戶體驗(yàn)的實(shí)現(xiàn),即無(wú)刷新加載頁(yè)面pjax技術(shù)