以下為更新答案：

針對這個問題，我今天抽時間封裝了一個工具：暫且稱其為分頁驅動吧，隨便寫寫也有200行代碼。

分頁主要面臨的問題，除了顯示之后，還要考慮當前頁的獲取、當前url的參數不能丟失等等

可以看看我封裝的效果，同時提供了諸多的配置選項。主要的思想來自thinkphp5的分頁驅動

以下為原答案：

控制分頁很多時候需要考慮很多情況，根據你想要的，我只是簡單了寫個demo，這個demo能夠完整一些工作，但是本身會存在一些問題，關鍵就是判斷如何顯示，間隔多大。

Document

.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");

總結

以上是生活随笔為你收集整理的html如何让条数按序号输出,JS 怎么控制页面序号较智能的生成？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。