html如何让条数按序号输出,JS 怎么控制页面序号较智能的生成？
以下为更新答案：
针对这个问题，我今天抽时间封装了一个工具：暂且称其为分页驱动吧，随便写写也有200行代码。
分页主要面临的问题，除了显示之后，还要考虑当前页的获取、当前url的参数不能丢失等等
可以看看我封装的效果，同时提供了诸多的配置选项。主要的思想来自thinkphp5的分页驱动
以下为原答案：
控制分页很多时候需要考虑很多情况，根据你想要的，我只是简单了写个demo，这个demo能够完整一些工作，但是本身会存在一些问题，关键就是判断如何显示，间隔多大。
.pagination {
display: inline-block;
color: #337ab7;
text-decoration: none;
background-color: #fff;
border: 1px solid #ddd;
position: relative;
padding: 6px 12px;
cursor: pointer;
}
.pagination>a {
text-decoration: none;
color: darkcyan
}
APPcache
var pageIndex = {
total: 1,
now: 1,
space: 1,
min: 5,
url: 'http://url.com?page=',
urlList: [],
init: function (param) {
this.total = param.total || this.total;
this.now = param.now || this.now;
this.space = param.space || this.space;
this.min = param.min || this.min;
this.url = param.url || this.url;
return this.work();
},
work: function () {
var resArr = [];
if (this.total <= this.min) {
for (var i = 1; i <= this.total; i++) {
this.urlList.push(this.getHtml(this.url + '' + i, i, true));
}
} else {
for (var i = 1; i <= 1 + this.space; i++) {
this.urlList.push(this.getHtml(this.url + '' + i, i, true));
}
var dec = this.now - this.space;
if (dec > 1 + this.space) {
this.urlList.push(this.getHtml('...', '...', false));
var sum = this.now + this.space;
if (sum < this.total - this.space) {
for (var i = dec; i <= sum; i++) {
this.urlList.push(this.getHtml(this.url + '' + i, i, true));
}
}
}
this.urlList.push(this.getHtml('...', '...', false));
for (var i = this.total - this.space; i <= this.total; i++) {
this.urlList.push(this.getHtml(this.url + '' + i, i, true));
}
}
return this.urlList;
},
getHtml: function (link, text, flag) {
if (flag) {
return '
' + text + ''} else {
return '
' + text + ''}
},
show: function (sel) {
var dom = document.querySelector(sel);
if (!dom) {
return false;
}
var htm = '';
this.urlList.forEach(function (item) {
htm += item;
});
dom.innerHTML = htm;
}
}
var config = {
url: location.pathname + "?page=", // 基础的url
space: 1, // 间隔 表示当前页左右的位移显示
total: 17, // 总数
now: 8, // 当前页数
min: 10 // 最小显示 小于等于10 会完全展开
};
pageIndex.init(config);
pageIndex.show("body");
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！