JS实现简单分页，页码显示

本文主要是介绍JS实现简单分页，页码显示，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

分页有许多插件可以实现，现在想试着写一个自己的分页。

分页有这几个问题需要解决，本文先讨论页码显示问题

页面显示需求

当前页码前后显示 3 页，然后需要显示第一页和最后一页 未显示的页码用省略号表示。

举例：如果总共 110 页

当前页码为 1，那么显示 1 2 3 4 ... 110 下一页

当前页码为 2，那么显示 上一页 1 2 3 4 5 ... 110 下一页

当前页码为 3，那么显示 上一页 1 2 3 4 5 6 ... 110 下一页

当前页码为 4，那么显示 上一页 1 2 3 4 5 6 7 ... 110 下一页

当前页码为 5，那么显示 上一页 1 2 3 4 5 6 7 8 ... 110 下一页

当前页码为 6，那么显示 上一页 1 ... 3 4 5 6 7 8 9 ... 110 下一页

…

当前页码为 100，那么显示 上一页 1 ... 97 98 99 100 101 102 103 ... 110 下一页

…

当前页码为 109，那么显示 上一页 1 ... 106 107 108 109 110 下一页

当前页码为 110，那么显示 上一页 1 ... 107 108 109 110

虽然每一页在实际应用中都是一个超链接，但是我们在思考算法时可以先将其忽略。

现在就变成了一个简单的字符串输出题。

下面是代码部分

先定义一个函数

function showPages (page, total) {}

准备好覆盖所有情况的测试。

这个题就简单咯，我们可以把所有结果都打印出来呗。

在无需引入一个代码测试库的情况下，我们来这么干

var total = 110;  
for (var i = 1; i <= total; i++) {  var ret = showPages(i, total);console.log(ret);
}

就从页码为 1 到最后一页的结果全输出出来了。

解决问题的思维模式。

function showPages (page, total) {var str = page + '';for (var i = 1; i <= 3; i++) {if (page - i > 1) {str = page - i + ' ' + str;}if (page + i < total) {str = str + ' ' + (page + i);}}if (page - 4 > 1) {str = '... ' + str;}if (page > 1) {str = '上一页 ' + 1 + ' ' + str;}if (page + 4 < total) {str = str + ' ...';}if (page < total) {str = str + ' ' + total + ' 下一页';}return str;}

把一些简单的 html 代码补充完整

...var str = '<a>' + page + '</a>';for (var i = 1; i <= 3; i++) {if (page - i > 1) {str = '<a class="page">' + (page - i) + '</a> ' + str;}if (page + i < total) {str = str + ' ' + (page + i);}}...

大概是可以实现通用分页的思路。

function showPageCommon(config) {  return function (page, total) {var str = '<a>' + page + '</a>';for (var i = 1; i <= 3; i++) {if (page - i > 1) {str = '<a class="' + config.color + '">' + (page - i) + '</a> ' + str;}if (page + i < total) {str = str + ' ' + (page + i);}}if (page - 4 > 1) {str = '... ' + str;}if (page > 1) {str = '上一页 ' + 1 + ' ' + str;}if (page + 4 < total) {str = str + ' ...';}if (page < total) {str = str + ' ' + total + ' 下一页';}return str;}
}var showPages = showPageCommon({  color: 'red'
});var total = 110;  
for (var i = 1; i <= total; i++) {  var ret = showPages(i, total);console.log(ret);
}var showPages = showPageCommon({  color: 'blue'
});var total = 110;  
for (var i = 1; i <= total; i++) {  var ret = showPages(i, total);console.log(ret);
}

在浏览器控制台可以得到结果。稍微修改

var total = 110;for (var i = 1; i <= total; i++) {var ret = showPages(i, total);console.log(ret);document.write(ret);

加一句

document.write(ret);

就可以在浏览器中得到分页显示结果了。

这篇关于JS实现简单分页，页码显示的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---