首页>>分页>>jquery无刷新分页(2024-05-23)

jquery无刷新分页

数据json必须是本地

jquery无刷新分页
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <!-- news数据 -->  
  2. <div class="container"></div>  
  3. <!-- 分页器 -->  
  4. <div class="pagination"></div>  

 

JavaScript Code
  1. $(function () {  
  2.   axios({  
  3.     url: 'js/news.json'  
  4.   }).then(result => {  
  5.     const pageSize = 5; // 每页显示的数量  
  6.     let currentPage = 1; // 当前页码  
  7.     // 生成分页HTML  
  8.     function newPageHTML(total, pageSize, currentPage) {  
  9.       const totalPages = Math.ceil(total / pageSize);  
  10.       let paginationHTML = '<a href="##" class="a">首页</a><a href="##" class="a previousPage">上一页</a>';  
  11.       const maxList = 10;  
  12.       let startPage = Math.max(currentPage - Math.floor(maxList / 2), 1);  
  13.       let endPage = Math.min(startPage + maxList - 1, totalPages);  
  14.       if (endPage - startPage < maxList - 1) {  
  15.         startPage = Math.max(endPage - maxList + 1, 1);  
  16.       }  
  17.       for (let i = startPage; i <= endPage; i++) {  
  18.         paginationHTML += `<a href='##' class="${i === currentPage ? 'active ' : ''}a">${i}</a>`;  
  19.       }  
  20.       paginationHTML += '<a href="##" class="a">尾页</a><a href="##" class="a nextPage">下一页</a>';  
  21.       return paginationHTML;  
  22.     }  
  23.     // 根据页码显示新闻列表  
  24.     function newNews(page) {  
  25.       currentPage = page;  
  26.       const startIndex = (currentPage - 1) * pageSize;  
  27.       const endIndex = Math.min(startIndex + pageSize - 1, result.data.length);  
  28.       const dataList = result.data.slice(startIndex, endIndex).map(item => `  
  29.         <div class='box'>  
  30.           <a href="javascript:;">  
  31.             <div class='aBox'>  
  32.               <img src="${item.images}" alt="">  
  33.             </div>  
  34.           </a>  
  35.           <div class="right">  
  36.             <h2>${item.title}</h2>  
  37.             <span>${item.time}</span>  
  38.             <p>${item.paragraph}</p>  
  39.           </div>  
  40.         </div>  
  41.       `).join("");  
  42.       $(".container").html(dataList);  
  43.       // 生成分页HTML并更新页面  
  44.       const paginationHTML = newPageHTML(result.data.length, pageSize, currentPage);  
  45.       $(".pagination").html(paginationHTML);  
  46.       alert(".previousPage", 1, '已经是第一页拉~', true);  
  47.       alert(".nextPage", Math.ceil(result.data.length / pageSize), '已经是最后一页拉~', false);  
  48.     }  
  49.     function alert(el, num, alertMessage, isSuccess) {  
  50.       $(document).on("click", el, function () {  
  51.         if (currentPage === num) {  
  52.          // myAlert(isSuccess, alertMessage);  
  53.           console.log(currentPage);  
  54.         }  
  55.       });  
  56.     }  
  57.     // 初始化分页和新闻列表  
  58.     newNews(currentPage);  
  59.     // 点击页码链接切换页码  
  60.     $(".pagination").on("click", ".a", function () {  
  61.       const page = $(this).text();  
  62.       currentPage = page === "首页" ? 1 :  
  63.         page === "尾页" ? Math.ceil(result.data.length / pageSize) :  
  64.           page === "上一页" ? Math.max(currentPage - 1, 1) :  
  65.             page === "下一页" ? Math.min(currentPage + 1, Math.ceil(result.data.length / pageSize)) :  
  66.               parseInt(page);  
  67.       newNews(currentPage);  
  68.     });  
  69.   });  
  70. });  

 


原文地址:http://www.freejs.net/article_fenye_946.html