自分で書かれたシンプルなページングコンポーネントである主な機能と実装はすべてJSにあります。ページを配置するためにDivを追加してページを生成し、コンテナのIDを指定します。
HTML構造は次のとおりです。
コードコピーは次のとおりです。
<ul id = "pagediv">
</ul>
class = "ページネーション"はページネーションスタイルを与えます、
ID = "Pagediv"は、JS生成されたペジネーションを配置するために使用されます
CSS構造は次のとおりです。
コードコピーは次のとおりです。
.pagination {
マージントップ：10px;
マージンボトム：10px;
ディスプレイ：インラインブロック。
パディング左：0;
マージン：20px 0;
ボーダーラジウス：4px;
}
.pagination> li {
表示：インライン;
}
.pagination> li：first-child> a {
マージン左：0;
Border-Top-Left-Radius：4px;
国境圏の左radius：4px;
}
.pagination> li> a {
位置：相対;
フロート：左;
パディング：6px 12px;
マージン左：-1px;
ラインハイト：1.42857143;
色：＃337AB7;
テキスト装置：なし;
バックグラウンドカラー：#fff;
境界線：1px solid #ddd;
カーソル：ポインター;
}
.pagination> li> a.navcur {
背景：#CCCCCCCC;
色：#ffffff;
}
以下はJS構造です。JQueryを参照してください
コードコピーは次のとおりです。
/**
* @pagecontentidページのdiv要素をレンダリングします
* @curpage現在の開始ページ
* @totalcountの総数
* @pagerowsページごとのディスプレイ数
* @callbackデータを表示するコールバック関数
*/
function Pagelist（pagecontentid、option）{
this.pagecontentid = document.getElementById（pagecontentid）;
this.curpage = option.curpage;
this.totalcount = option.totalcount;
this.pagerows = option.pagerows;
this.callback = option.callback;
this.pagesize = math.ceil（this.totalcount/this.pagerows）;
}
pagelist.prototype = {
init：function（）{
this.renderbtn（）;
}、
firstPage：function（）{
var _self = this;
_self._firstpage = document.createelement（ "li"）;
_self._firstpagea = document.createelement（ "a"）;
_self._firstpagea.innerhtml = "Homepage";
_self._firstpage.appendchild（_self._firstpagea）;
this.pagecontentid.appendchild（_self._firstpage）;
_self._firstpage.onclick = function（）{
_self.gotopage（1）;
}
}、
lastPage：function（）{
var _self = this;
_self._lastpage = document.createelement（ "li"）;
_self._lastpagea = document.createelement（ "a"）;
_self._lastpagea.innerhtml = "last page";
_self._lastpage.appendchild（_self._lastpagea）;
this.pagecontentid.appendchild（_self._lastpage）;
_self._lastpage.onclick = function（）{
_self.gotopage（_self.pagesize）;
}
}、
putpage：function（）{
var _self = this;
_self._prew = document.createelement（ "li"）;
_self._prewa = document.createelement（ "a"）;
_self._prewa.innerhtml = "<<";
_self._prew.appendchild（_self._prewa）;
this.pagecontentid.appendChild（_ self._prew）;
_self._prew.onclick = function（）{
if（_self.curpage> 1）{
_self.curpage-;
}
_self.callback.call（this、this.curpage）;
_self.init（）;
console.log（_ self.curpage）;
}
}、
次のページ：function（）{
var _self = this;
_self._next = document.createelement（ "li"）;
_self._nexta = document.createelement（ "a"）;
_self._nexta.innerhtml = ">>";
_self._next.appendchild（_self._nexta）;
this.pagecontentid.appendchild（_self._next）;
_self._next.onclick = function（）{
if（_self.curpage <_ self.pagesize）{
_self.curpage ++;
}
_self.callback.call（this、this.curpage）;
_self.init（）;
console.log（_ self.curpage）;
}
}、
Pagenum：function（）{
var _self = this;
if（this.pagesize <= 10）{
for（var i = 1、len = this.pagesize; i <= len; i ++）{
_self._num = document.createelement（ "li"）;
_self._numa = document.createelement（ "a"）;
_self._numa.innerhtml = i;
_self._num.appendchild（_self._numa）;
this.pagecontentid.appendChild（_ self._num）;
_self._num.onclick = function（）{
var curpage = $（this）.text（）;
_self.gotopage（curpage）;
}
}
}
それ以外{
if（_self.curpage <= 10）{
for（var i = 1; i <= 10; i ++）{
_self._num = document.createelement（ "li"）;
_self._numa = document.createelement（ "a"）;
_self._numa.innerhtml = i;
_self._num.appendchild（_self._numa）;
this.pagecontentid.appendChild（_ self._num）;
_self._num.onclick = function（）{
var curpage = $（this）.text（）;
_self.gotopage（curpage）;
}
}
}
else if（_self.curpage> 10 && _ self.curpage <= this.pagesize）{
if（this.pagesize <math.ceil（_self.curpage/10）*10）{
for（var i = math.floor（_self.curpage/10）*10+1; i <= this.pagesize; i ++）{
if（_self.curpage> this.pagesize）
戻る;
_self._num = document.createelement（ "li"）;
_self._numa = document.createelement（ "a"）;
_self._numa.innerhtml = i;
_self._num.appendchild（_self._numa）;
this.pagecontentid.appendChild（_ self._num）;
_self._num.onclick = function（）{
var curpage = $（this）.text（）;
_self.gotopage（curpage）;
}
}
}それ以外{
if（math.ceil（_self.curpage/10）*10 == _ self.curpage）{
for（var i = _ self.curpage-9; i <= _ self.curpage; i ++）{
_self._num = document.createelement（ "li"）;
_self._numa = document.createelement（ "a"）;
_self._numa.innerhtml = i;
_self._num.appendchild（_self._numa）;
this.pagecontentid.appendChild（_ self._num）;
_self._num.onclick = function（）{
var curpage = $（this）.text（）;
_self.gotopage（curpage）;
}
}
}それ以外{
for（var i = math.floor（_self.curpage/10）*10+1; i <= math.ceil（_ self.curpage/10）*10; i ++）{10; i ++）{
_self._num = document.createelement（ "li"）;
_self._numa = document.createelement（ "a"）;
_self._numa.innerhtml = i;
_self._num.appendchild（_self._numa）;
this.pagecontentid.appendChild（_ self._num）;
_self._num.onclick = function（）{
var curpage = $（this）.text（）;
_self.gotopage（curpage）;
}
}
}
}
}
}
$（ "。ページネーションli"）。各（function（）{
if（$（this）[0] .innertext == _ self.curpage）{
$（ "。ページネーションli"）。子供（ "a"）。removeclass（ "navcur"）;
$（this）.children（ "a"）。addclass（ "navcur"）;
}
}）;
}、
getopage：function（curpage）{
this.curpage = curpage;
this.callback.call（this、this.curpage）;
this.init（）;
console.log（this.curpage）;
}、
renderbtn：function（）{
$（ "。ページネーション"）。html（ ""）;
this.firstpage（）;
this.prewpage（）;
this.pagenum（）;
this.nextPage（）;
this.lastpage（）;
}
};
$（function（）{
var pager = new Pagelist（ "Pagediv"、{
呪い：1、
TotalCount：26、
ポケットロウ：1、
コールバック：callbackfuc
}）;
pager.init（）;
}）;
関数callbackfuc（curpage）{
}
説明：
このページは10ページに基づいています。 10ページ未満の場合、すべてのページが表示されます。 10ページを超えると、ページは残りのページを表示するようになります。
呼び出し方法：
コードコピーは次のとおりです。
$（function（）{
var pager = new Pagelist（ "Pagediv"、{
呪い：1、
TotalCount：26、
ポケットロウ：1、
コールバック：callbackfuc
}）;
pager.init（）;
}）;
上記は、このページングコンポーネントのコアコードです。気に入っていただければ幸いです。