前端页面分页算法 js+php

实现效果:

 

实现思路:

  通过当前选中页码数值和总页码数量,计算返回结果,以数组的形式返回。遍历数组内容,完成页面渲染。

 

php算法:

/**
 * getNavigatePage
 * 
 * @param {string} currentPage  当前页码数
 * @param {string} pageCount    总页数
 * @param {string} size         页码展示个数(10个页码)
 * @returns array
 */
public function getNavigatePage()
{
    $args = $this->getRequest()->getParams();

    $currentPage = isset($args['display_page_num']) ? $args['display_page_num'] : 1;
    $pageCount = isset($args['last_page_num']) ? $args['last_page_num'] : 10;
    $size = strstr($_SERVER['HTTP_USER_AGENT'], 'Windows') ? 10 : 6;

    $navigatePage = [];
    if ($pageCount <= $size) {
        for ($i = 1; $i <= $pageCount; $i++) {
            $navigatePage[] = $i;
        }
    } elseif ($currentPage > ceil(($size + 1) / 2) && $currentPage + floor(($size - 1) / 2) < $pageCount) {
        $navigatePage[] = 1;
        $navigatePage[] = '...';
        for ($i = $currentPage - ceil(($size - 1) / 2 - 1); $i < $currentPage + floor(($size - 1) / 2); $i++) {
            $navigatePage[] = $i;
        }
        $navigatePage[] = '...';
        $navigatePage[] = $pageCount;
    } elseif ($currentPage + floor(($size - 1) / 2) >= $pageCount) {
        $navigatePage[] = 1;
        $navigatePage[] = '...';
        for ($i = $pageCount - ($size - 2); $i <= $pageCount; $i++) {
            $navigatePage[] = $i;
        }
    } else {
        for ($i = 1; $i <= $size - 1; $i++) {
            $navigatePage[] = $i;
        }
        $navigatePage[] = '...';
        $navigatePage[] = $pageCount;
    }

    return $navigatePage;
}

 

js算法:

/**
 * getNavigatePage
 * 
 * @param {string} currentPage  当前页码数
 * @param {string} pageCount    总页数
 * @param {string} size         页码展示个数(10个页码)
 * @returns array
 */
function getNavigatePage(currentPage, pageCount, size) {

    var navigatePage = new Array();
    var i;

    currentPage = parseInt(currentPage);
    pageCount = parseInt(pageCount);
    size = parseInt(size);

    if (pageCount <= size) {
        for (i = 1; i <= pageCount; i++) {
            navigatePage.push(i);
        }
    } else if (currentPage > Math.ceil((size + 1) / 2) && (currentPage + Math.floor((size - 1) / 2)) < pageCount) {
        navigatePage.push(1);
        navigatePage.push('...');
        for (i = (currentPage - Math.ceil(((size - 1) / 2) - 1)); i < (currentPage + Math.floor((size - 1) / 2)); i++) {
            navigatePage.push(i);
        }
        navigatePage.push('...');
        navigatePage.push(pageCount);
    } else if ((currentPage + Math.floor((size - 1) / 2)) >= pageCount) {
        navigatePage.push(1);
        navigatePage.push('...');
        for (i = (pageCount - (size - 2)); i <= pageCount; i++) {
            navigatePage.push(i);
        }
    } else {
        for (i = 1; i <= size - 1; i++) {
            navigatePage.push(i);
        }
        navigatePage.push('...');
        navigatePage.push(pageCount);
    }

    return navigatePage;
}

 

posted @ 2023-02-08 17:34  七彩鱼丸  阅读(177)  评论(0编辑  收藏  举报