この記事では、JSページネーションツールの使用について説明します。参照のためにそれを共有してください。特定の実装方法は次のとおりです。
JSコードパーツ：
次のようにコードをコピーします：/**
*ページネーションJS
*/
varページ;
（関数（）{
var page = {バージョン： "1.0"、著者： "liuxingmi"};
var showpage = 9;
page.navigation = function（divid、totalRecord、totalpage、currentPage、func）{
var nav = '<ul class =/"pagination/" title =/"pagination list/">';
NAV += '<li>合計レコード：<i id = "TotalRecord">' +TotalRecord +'</i> </li>';
NAV + = '<li>合計ページカウント：<i id = "totalpage">' + totalpage + '</i> </li>';
Nav + = '<li>現在のページ：<b id = "pagenum">' + currentPage + '</b> </li>';
if（currentPage == 1）{
nav += '<li> <a href = "javascript：void（0）;" id = "firstPage"> home </a> </li> ';
nav += '<li> <a href = "javascript：void（0）;" id = "frontpage">前のページ</a> </li> ';
} それ以外 {
nav + = '<li> <a href = "javascript：' + func + '（1）;" id = "firstPage"> home </a> </li> ';
nav + = '<li> <a href = "javascript：' + func + '（' +（currentPage -1） + '）;" id = "frontpage">前のページ</a> </li> ';
}
nav += '<li id = "num"> <ol>';
var start = currentPage -math.floor（showpage/2）;
var end = currentPage + math.floor（showpage/2）;
if（end> totalpage）{
start- =（end -totalpage）;
}
if（start <= 0）{
start = 1;
}
if（currentPage <showpage && end <showpage）{
end = showpage;
}
if（end> totalpage）{
end = totalpage;
}
for（var i = start; i <= end; i ++）{
if（i == currentPage）{
nav + = '<li> <a href = "javascript：' + func + '（' + i + '）;">' + i + '</a> </li>';
} それ以外 {
nav + = '<li> <a href = "javascript：' + func + '（' + i + '）;">' + i + '</a> </li>';
}
}
nav += '</ol> </li>';
if（currentPage == TotalPage）{
nav += '<li> <a href = "javascript：void（0）;" id = "nextpage">最後のページ</a> </li> ';
nav += '<li> <a href = "javascript：void（0）;" id = "lastpage"> lastページ</a> </i> ';
} それ以外 {
nav + = '<li> <a href = "javascript：' + func + '（' +（currentPage + 1） + '）;" id = "nextpage">最後のページ</a> </li> ';
nav + = '<li> <a href = "javascript：' + func + '（' + totalpage + '）;" id = "lastpage"> lastページ</a> </i> ';
}
nav += '</ul>';
$（ "＃" + divid）.html（nav）;
};
this.page = page;
}）（）;
CSSパート：
次のようにコードをコピーします。/*ページスタイルが始まります*/
.pagination {
オーバーフロー：隠し;
マージン：0 0 25px;
パディング：10px 10px 6px 150px;
ボーダートップ：1PXソリッド＃C8C8C8;
_Zoom：1;
テキストアライグ：センター;
}
.pagination *{
表示：インライン;
フロート：左;
マージン：0;
パディング：0;
フォントサイズ：12px;
}
.pagination i {
フロート：なし;
パディング右：1px;
}
.CurrentPage B {
フロート：なし;
色：＃f00;
}
.paginationli {
リストスタイル：なし;
マージン：0 5px;
}
.pagination li li {
位置：相対;
マージン：-2px 0 0;
フォントファミリー：arial、helvetica、sans-serif
}
.firstpage a、.previouspage a、.nextpage a、.lastpage a {
オーバーフロー：隠し;
高さ：0;
テキストインデント：-9999EM;
ボーダートップ：8pxソリッド#fff;
ボーダーボトム：8px solid #fff;
}
.pagination li li a {
マージン：0 1px;
パディング：0 4px;
ボーダー：3px double #ffff;
+ボーダーカラー：#eee;
背景：#eee;
色：＃06f;
テキスト装置：なし;
}
.pagination li li a：hover {
背景：＃f60;
境界線：#ffff;
+ボーダーカラー：＃f60;
色：#ffff;
}
li.firstpage {
マージン左：40px;
国境左：3pxソリッド＃06f;
}
.firstpage a、.previouspage a {
国境右：12pxソリッド＃06f;
}
.firstpage a：hover、.previouspage a：hover {
境界線右色：＃f60;
}
.nextpage a、.lastpage a {
国境左：12pxソリッド＃06f;
}
.nextpage a：hover、.lastpage a：hover {
国境左の色：＃f60;
}
.paginationli.lastpage {
国境右：3pxソリッド＃06f;
}
.pagination li li li.currentstate a {
位置：相対;
マージン：-1px 3px;
パディング：1px 4px;
ボーダー：3px double #ffff;
+ボーダーカラー：＃f60;
背景：＃f60;
色：#ffff;
}
.Pagination Li.CurrentState、.CurrentState A、.CurrentState A：Hover {
境界線：#ffff #ccc;
カーソル：デフォルト;
}
/*ページネーションスタイルは終了します*/
呼び出し方法：
コードコピーは次のとおりです。Page.Navigation（ "Pagenav"、100、10、1、 "xxxlist"）;
<div id = "pagenav"> </div>
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。