javascript 简单的分页数字阵列

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了javascript 简单的分页数字阵列相关的知识,希望对你有一定的参考价值。

function pagination($c, $m) {
    
	$current = $c;
        $last = $m;
        $delta = 3;
        $left = $current - $delta;
        $right = $current + $delta + 1;
        $range = [];
        $rangeWithDots = [];
        $l = 0;

    for ($i = 1; $i <= $last; $i++) {
		if ($i == 1 || $i == $last || $i >= $left && $i < $right) {
			array_push($range,$i);
		}
	}

    foreach ($range as $i ) {
		if ($l) {
			if ($i - $l === 2) {
				array_push($rangeWithDots,$l + 1);
			} else if ($i - $l !== 1) {
				array_push($rangeWithDots,'...');
			}
		}
	    array_push($rangeWithDots,$i);
		$l = $i;
	}

    return $rangeWithDots;
}
Credits : https://github.com/kottenator

// Implementation in ES6
function pagination(c, m) {
    var current = c,
        last = m,
        delta = 2,
        left = current - delta,
        right = current + delta + 1,
        range = [],
        rangeWithDots = [],
        l;

    for (let i = 1; i <= last; i++) {
        if (i == 1 || i == last || i >= left && i < right) {
            range.push(i);
        }
    }

    for (let i of range) {
        if (l) {
            if (i - l === 2) {
                rangeWithDots.push(l + 1);
            } else if (i - l !== 1) {
                rangeWithDots.push('...');
            }
        }
        rangeWithDots.push(i);
        l = i;
    }

    return rangeWithDots;
}

/* 
Test it:

for (let i = 1, l = 20; i <= l; i++)
    console.log(`Selected page ${i}:`, pagination(i, l));

Expected output:

Selected page 1: [1, 2, 3, "...", 20]
Selected page 2: [1, 2, 3, 4, "...", 20]
Selected page 3: [1, 2, 3, 4, 5, "...", 20]
Selected page 4: [1, 2, 3, 4, 5, 6, "...", 20]
Selected page 5: [1, 2, 3, 4, 5, 6, 7, "...", 20]
Selected page 6: [1, "...", 4, 5, 6, 7, 8, "...", 20]
Selected page 7: [1, "...", 5, 6, 7, 8, 9, "...", 20]
Selected page 8: [1, "...", 6, 7, 8, 9, 10, "...", 20]
Selected page 9: [1, "...", 7, 8, 9, 10, 11, "...", 20]
Selected page 10: [1, "...", 8, 9, 10, 11, 12, "...", 20]
Selected page 11: [1, "...", 9, 10, 11, 12, 13, "...", 20]
Selected page 12: [1, "...", 10, 11, 12, 13, 14, "...", 20]
Selected page 13: [1, "...", 11, 12, 13, 14, 15, "...", 20]
Selected page 14: [1, "...", 12, 13, 14, 15, 16, "...", 20]
Selected page 15: [1, "...", 13, 14, 15, 16, 17, "...", 20]
Selected page 16: [1, "...", 14, 15, 16, 17, 18, 19, 20]
Selected page 17: [1, "...", 15, 16, 17, 18, 19, 20]
Selected page 18: [1, "...", 16, 17, 18, 19, 20]
Selected page 19: [1, "...", 17, 18, 19, 20]
Selected page 20: [1, "...", 18, 19, 20]
*/

以上是关于javascript 简单的分页数字阵列的主要内容,如果未能解决你的问题,请参考以下文章

javascript javascript中的分页逻辑包括当前页面,总页面,最大按钮显示

javascript Laravel和Vue js app的分页

JavaScript实现的分页功能[用于搭配后台使用]

facebook javascript API 中的分页如何工作?

javascript SEO友好的分页组件与像谷歌一样的反应

asp.net一个非常简单的分页