JavaScript 工具收集 - JS分页算法工具 jw-paginate

Posted 2022-02-21 笑虾

javascript 工具收集 - JS分页算法工具 jw-paginate

• 源码
• • 用于下滑翻页场景的简化版
• 示例
• • paginate(150)
  • paginate(150, 7)
  • paginate(150, 7, 15)
  • paginate(150, 7, 15, 5)
• 参考资料

这是一个纯分页算法工具，网上很多都跟html混在一起了。

源码

原本是TypeScript的，区别不大就是添加了类型，为了方便后续拿来，这里直接上个JS版本的。

1. 当前页的取值区间：[第1页 到最后一页]，超过最大页数，则显示最后一页。

/** 
 * totalItems  ：总条数
 * currentPage : 当前页，默认1 
 * pageSize    ：每页条数，默认10
 * maxPages    ：导航条总页码数，默认10
 */
function paginate(totalItems, currentPage= 1, pageSize=10, maxPages=10)
    // 计算总页数
    let totalPages = Math.ceil(totalItems / pageSize);

    // 确保当前页面没有超出范围
    if (currentPage < 1) 
        currentPage = 1;
     else if (currentPage > totalPages) 
        currentPage = totalPages;
    

    let startPage, endPage;
    // 总页数 <= 导航条总页码数，显示总页数
    if (totalPages <= maxPages)         
        startPage = 1;
        endPage = totalPages;
     else 
        // 总页数 > 导航条总页码数，计算导航条开始和结束页码
        let maxPagesBeforeCurrentPage = Math.floor(maxPages / 2);
        let maxPagesAfterCurrentPage = Math.ceil(maxPages / 2) - 1;
        // 当前页靠近开始
        if (currentPage <= maxPagesBeforeCurrentPage) 
            startPage = 1;
            endPage = maxPages;
        // 当前页靠近结束
         else if (currentPage + maxPagesAfterCurrentPage >= totalPages) 
            startPage = totalPages - maxPages + 1;
            endPage = totalPages;
        // 当前页靠近中间位置
         else 
            startPage = currentPage - maxPagesBeforeCurrentPage;
            endPage = currentPage + maxPagesAfterCurrentPage;
        
    

    // 计算每页索引偏移量(每页数据的索引相对全量，从多少开始到多少结束)
    let startIndex = (currentPage - 1) * pageSize;
    let endIndex = Math.min(startIndex + pageSize - 1, totalItems - 1);

    // 创建要在页导航控件中用于显示页面数组  
    let pages = Array.from(Array((endPage + 1) - startPage).keys()).map(i => startPage + i);

	// 参考 PageInfo.java 添加边界判断。 true / false
	let isFirstPage = currentPage == 1;
	let isLastPage = currentPage == totalPages || totalPages == 0;
	let hasPreviousPage = currentPage > 1;
	let hasNextPage = currentPage < totalPages;
        
    // 返回数据分页信息
    return 
        totalItems: totalItems,   // 总条数
        currentPage: currentPage, // 当前页
        pageSize: pageSize,       // 每页条数
        totalPages: totalPages,   // 总页数
        startPage: startPage,	  // 导航条-开始页
        endPage: endPage,     	  // 导航条-结束页
        startIndex: startIndex,   // 当前页开始索引
        endIndex: endIndex,       // 当前页结束索引
        pages: pages,              // 导航条-页码数组
        // 参考 PageInfo.java 添加边界判断
        isFirstPage,isLastPage,hasPreviousPage,hasNextPage
    ;

用于下滑翻页场景的简化版

不需要算导航条的页码数据。只关心总页数和是否有下一页。

/** 
 * totalItems  ：总条数
 * currentPage : 当前页，默认1 
 * pageSize    ：每页条数，默认10
 */
function paginate(totalItems, currentPage= 1, pageSize=10)
    // 计算总页数
    let totalPages = Math.ceil(totalItems / pageSize);
   	// 存在下一页
   	let hasNextPage = currentPage < totalPages;
   	
	return totalPages, hasNextPage;

示例

paginate(150)

totalItems: 150

• 总条数=150
• 当前页=默认1
• 每页条数=默认10
• 导航条总页码数=默认10

 
    totalItems: 150,
    currentPage: 1,
    pageSize: 10,
    totalPages: 15,
    startPage: 1,
    endPage: 10,
    startIndex: 0,
    endIndex: 9,
    pages: [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ] 

paginate(150, 7)

totalItems: 150, currentPage: 7

• 总条数=150
• 当前页=7
• 每页条数=默认10
• 导航条总页码数=默认10

 
    totalItems: 150,
    currentPage: 7,
    pageSize: 10,
    totalPages: 15,
    startPage: 2,
    endPage: 11,
    startIndex: 60,
    endIndex: 69,
    pages: [ 2, 3, 4, 5, 6, 7, 8, 9, 10, 11 ] 

paginate(150, 7, 15)

totalItems: 150, currentPage: 7, pageSize: 15

• 总条数=150
• 当前页=7
• 每页条数=15
• 导航条总页码数=默认10

 
    totalItems: 150,
    currentPage: 7,
    pageSize: 15,
    totalPages: 10,
    startPage: 1,
    endPage: 10,
    startIndex: 90,
    endIndex: 104,
    pages: [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ] 

paginate(150, 7, 15, 5)

totalItems: 150, currentPage: 7, pageSize: 15, maxPages: 5

• 总条数=150
• 当前页=7
• 每页条数=15
• 导航条总页码数=5

 
    totalItems: 150,
    currentPage: 7,
    pageSize: 15,
    totalPages: 10,
    startPage: 5,
    endPage: 9,
    startIndex: 90,
    endIndex: 104,
    pages: [ 5, 6, 7, 8, 9 ] 

参考资料

JavaScript - Pure Pagination Logic in Vanilla JS / TypeScript
https://github.com/cornflourblue/jw-paginate