jQuery li 分頁,是利用jQuery框架來實現li列表的分頁功能。通過動態創建li元素,再利用jQuery的hide()和show()方法來隱藏和顯示需要顯示的列表項。這種方法可以在不刷新頁面的情況下完成分頁操作,提高了用戶的體驗。
//使用jQuery li 分頁的示例代碼 //html代碼 <div class="list"> <ul></ul> <div class="pagination"></div> </div> //js代碼 var pageCount = 10;//每頁顯示的列表項數量 var currentPage = 1;//當前頁數 var totalData = [{id:1,title:'標題一'},{id:2,title:'標題二'},{id:3,title:'標題三'},…];//總數據 function showData(currentPage){ $('.list ul li').remove();//清除之前的li元素 for (var i = (currentPage - 1) * pageCount; i < currentPage * pageCount; i++) { if(totalData[i] == null){ break;//完全遍歷完數據,結束循環 } var liEl = '<li><a href="#">'+totalData[i].title+'</a></li>';//創建li元素 $('.list ul').append(liEl);//添加li元素 } } function replacePagination(pageIndex){ if(pageIndex < 1 || pageIndex>Math.ceil(totalData.length/pageCount)){ return false;//頁碼不合法,直接返回 } var paginationEl = ''; var totalPageNum = Math.ceil(totalData.length / pageCount);//總共需要分的頁數 for(var i=1;i<=totalPageNum;i++){ if(i == pageIndex){ paginationEl += '<a href="javascript:void(0);" class="active">'+i+'</a>';//當前頁碼添加樣式 }else{ paginationEl += '<a href="javascript:void(0);">'+i+'</a>'; } } $('.pagination').html(paginationEl); } //初始化 showData(currentPage); replacePagination(currentPage); //點擊分頁事件 $('.pagination').on('click','a',function(){ var pageIndex = parseInt($(this).text()); currentPage = pageIndex; showData(currentPage); replacePagination(currentPage); });
在這份示例代碼中,我們首先定義了每頁顯示的列表項數量、當前頁數和總數據。在showData()方法中,我們通過遍歷數據來動態創建li元素并添加到ul列表中。在replacePagination()方法中,我們根據需要分的總頁數和當前頁碼來動態創建分頁元素。最后,在點擊分頁事件中,我們根據點擊的頁碼值來更新分頁元素和列表顯示。通過這種方式,我們就完成了一個基于jQuery li 分頁的列表分頁功能。
下一篇beetl和vue