js實(shí)現(xiàn)簡(jiǎn)單的前端分頁(yè)效果
有些項(xiàng)目業(yè)務(wù)比較簡(jiǎn)單，但用到前端分頁(yè)的地方又比較多，插件的體積比較難控制用起來(lái)也麻煩，所以自己寫一個(gè)簡(jiǎn)易的。
實(shí)現(xiàn)思路通過(guò) jQuery.slice() 選擇子集的區(qū)間元素， 然后控制顯示隱藏來(lái)實(shí)現(xiàn)；假設(shè)每頁(yè)顯示數(shù)量為x，當(dāng)前頁(yè)碼為y，元素索引從0開始，那么顯示的區(qū)間即為 x(y-1) 到 xy。
效果演示
demo代碼
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <meta http-equiv='X-UA-Compatible' content='IE=edge'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>前端分頁(yè)實(shí)現(xiàn)demo</title></head><body> <div class='parent'><ul style='min-height: 147px;'></ul><div class='page-box'> <button class='page-btn prev'>上一頁(yè)</button> <span class='page-num'>1/1</span> <button class='page-btn next'>下一頁(yè)</button></div> </div> <div class='parent'><ul style='min-height: 63px;'></ul><div class='page-box'> <button class='page-btn prev'>上一頁(yè)</button> <span class='page-num'>1/1</span> <button class='page-btn next'>下一頁(yè)</button></div> </div> <script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js'></script> <script>/** * 分頁(yè)初始化 * @param {*} eleBox 需要被分頁(yè)的容器 * @param {*} size 每頁(yè)的條數(shù) */function InitPagination(eleBox, size) { var box = $(eleBox),children = box.children(),total = children.length,pageBox = box.next(),pageNum = pageBox.find(’.page-num’),maxNum = !Math.ceil(total / size) ? 1 : Math.ceil(total / size); pageNum.text(’1/’ + maxNum); children.hide(); children.slice(0, size).show(); pageBox.off().on(’click’, ’.prev, .next’, function (e) {var nowNum = parseInt(pageNum.text().split(’/’)[0]);if ($(this).hasClass(’prev’)) { nowNum--; if (nowNum < 1) {nowNum = 1return; }} else { nowNum++; if (nowNum > maxNum) {nowNum = maxNumreturn; }}children.hide();children.slice(size * (nowNum - 1), nowNum * size).show();pageNum.text(nowNum + ’/’ + maxNum); })}// 模擬數(shù)據(jù)寫入var box = $(’.box’), box2 = $(’.box2’), li = ’’;for (let i = 0; i < 16; i++) { li += ’<li>’ + i + ’</li>’}box.html(li); box2.html(li);// 實(shí)例化分頁(yè)器new InitPagination(box, 7)new InitPagination(box2, 3) </script></body></html>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. JS中6個(gè)對(duì)象數(shù)組去重的方法2. Python基于requests庫(kù)爬取網(wǎng)站信息3. 資深程序員：給Python軟件開發(fā)測(cè)試的25個(gè)忠告！4. Python使用Selenium自動(dòng)進(jìn)行百度搜索的實(shí)現(xiàn)5. 一文帶你徹底理解Java序列化和反序列化6. python中文本字符處理的簡(jiǎn)單方法記錄7. PHP利用curl發(fā)送HTTP請(qǐng)求的實(shí)例代碼8. PHP laravel實(shí)現(xiàn)導(dǎo)出PDF功能9. vscode運(yùn)行php報(bào)錯(cuò)php?not?found解決辦法10. Java commons-httpclient如果實(shí)現(xiàn)get及post請(qǐng)求
網(wǎng)公網(wǎng)安備