ページング機能を達成するためのフロントエンド（PC）

<！DOCTYPE HTML>
<HTML>
<HEAD>
<メタ文字セット= "UTF-8">
<タイトル>加载</ TITLE>

<スタイル>
#page {
マージン：0 10pxの;
色：＃999;
}
#pageのa.active {
色：＃0000ee。
}
</スタイル>
</ HEAD>
<BODY>
<DIV CLASS = "ページネーション・ニック">

<div要素のid = "リスト"> </ div>
<divのID = "ページ"> </ div>
</ div>
<スクリプトSRC = "https://code.jquery.com/jquery-3.4.1.min.js"> </ SCRIPT>
<SCRIPT>
VARページャ= {
pageIndexパラメータ：1、//当前页码
PAGECOUNT：10 / /每页显示多少条数据
pageMax：

VAR OBJ = {他の：{}、値：[11,21,31,41,51,61,71,81,91,1,12,22,32,42,52,62,72,82,92、 2,13,23,33,43,53,63,73,83,93,3,14,24,34,44,54,64,74,84,94,4]}; //模拟数据

$（関数（）{

//一共有多少页
pager.pageMax = obj.value.length％pager.pageCount（obj.value.length / pager.pageCount）+1：obj.value.length / pager.pageCount;
VARのbtnBox = '';

//循环出多少页
btnBox + = '<a href="javascript:;" data-type="first">首页</スパン>は、<a href = "javascriptの:;"データタイプ= "NEXTPAGE 「>下一页</a>を」
のための（VAR I = 1; I <= pager.pageMax; I ++）{
VARのJ =;
btnBox + = 'は、<a href = "javascriptの:;"データタイプ= "' + J + '"> '+ J +' </a>の'
}
最初の'：はlistBox（1）; //首页pager.pageIndex = 1つのブレーク。ケース'最後の'：はlistBox（pager.pageMax）; //尾页

pager.pageIndex = pager.pageMax
ブレーク。
ケース'NEXTPAGE'：//下一页
IF（pager.pageIndex <pager.pageMax）{
にconsole.log（typeof演算（pager.pageIndex））
はlistBox（pager.pageIndex + 1）
pager.pageIndex = pager.pageIndex + 1
コンソール.logの（pager.pageIndex）
}
ブレーク。
ケース'FIRSTPAGE'：//上一页
IF（pager.pageIndex> 1）{
はlistBox（pager.pageIndex-1）
pager.pageIndex = pager.pageIndex-1
}
ブレーク。
}
}

PAGENUM（）
$（ 'INT '）。valを（pager.pageIndex）

}）

//填写页数搜索
$（'。BTN-YES '）。（'クリック'、機能（上）{
するif（$ （ '.INT '）。valを（））{

場合（$（'。INT'）。valを（）<

pager.pageIndex = 1
$（ 'INT '）。ヴァル（1）
}そうであれば（$（'。INT'）。ヴァル（）> pager.pageMax）{
はlistBox（pager.pageMax）
pager.pageIndex =ページャ。 pageMax
$（ 'INT '）。ヴァル（pager.pageMax）
} {他
はlistBox（$（'。INT '）。ヴァル（））
pager.pageIndex = $（'。INT'）。ヴァル（）
}
}
PAGENUM （）
}）

}）

//选中页码

関数PAGENUM（）{
$（ '＃ページA'）。各（関数（）{

IF（$（この）.ATTR（ 'データタイプ'）== pager.pageIndex ）{
$（この）.addClass（ 'アクティブ'）。兄弟（）。removeClass（ 'アクティブ'）
}
}）
}
//列表
関数リストボックス（numIndex）{

VAR numList = numIndex * pager.pageCount //循环的数据条数
VaRのnumNext =（numIndex-1） * pager.pageCount // ループの開始からデータの一部
にconsole.log（numNext）
にconsole.log（numlist）
VaRのXHTML = '';

（VAR = numNext Iため、私はnumlist <; I ++ ）{

XHTML + = '<LI>' + obj.value [I] + '</ LI>'
}
にconsole.log（XHTML）
$（ '＃リスト'）HTML（XHTML）;.
}
</ SCRIPT>
</ボディ>
</ HTML>

ページング機能を達成するためのフロントエンド（PC）

おすすめ