最初にレンダリングをお見せしましょう。効果が良いと感じた場合は、実装コードを参照してください。
JSでページングを書くのはこれが初めてであるため、文章は完璧ではないはずです。一部の公開は抽出されていませんが、まだ使用しても問題ありません。このコードは、公開ページングとして扱うことができます。このコードを使用して、わずかに異なる2つのページングを書きました！一般的なコード抽出物は似ています。これは、主にAjaxのバックグラウンドと返された値が異なるためです。合計ページ番号が取得され、ホームページ/次のページをクリックして値を正しく渡す限り、基本的にはページネーションに問題はありません。
確かに、インターネットには多くのページングプラグインとオープンソースコードがあります。シングルブックはバックエンド開発類人猿であり、フロントエンドCSSやその他のスタイルはまだ制御できないため、自分で書き始めました。実際、ページングの原則は非常に簡単です。 Ajaxを使用して、値（現在のページ番号）を背景に渡し、制限を使用して背景でそれらをページングすることです。
これ以上苦労せずに、コードをアップロードしてください！
注：このプロジェクトは、プロセス全体でJSを使用して書かれています。フロントデスクのデータはAjaxを介して取得され、その後、組み立てられてページに動的にロードされます。
1.最初に前のページのコード、次のページなどを添付します（内部の値はすべて擬似値であり、以下はJSで再割り当てされます！）
<ul id = "page"> <li id = "shouye"> <a href = 'javascript：indexpage（1）;'> home </a> </li> <li id = "shangyiye"> <a href = 'javascript：indexpage（-1）;'> </i> < href = "javascript：void（0）;" > 1 </a> </li> <li> <a id = "2" href = "javascript：void（0）;" > 2 </a> </li> <li> <a id = "3" href = "javascript：void（0）;" > 2 </a> </li> <li> <a id = "3" href = "javascript：void（0）;" > 3 </a> </li> <li> <a id = "5" href = "javascript：void（0）;" > ... </a> </li> <li> <a id = "fore" href = "javascript：void（0）;" > 13855 </a> </li> <li class = 'p-next'> <a href = 'javascript：indexpage（-3）;' onclick = "jumptopage（ '2'、 '/goods/ajaxquerygoodslist.do.html'、 ''、 'goodslistcontainer'、 '13855'、listpagecallback）;">次のページ<i> </i> </a> </li href = 'javascript：void（0）;' onclick = "indexpage（0）;">最後のページ</a> </li> <li> <span id = "span_number">合計13,855ページ<input type = "text" id = "input_number"/>ページ<入力name = ""値= "識別" type = "ボタンonclick = "jumptopage（jquery（ '＃input_number'）。val（）、 '/goods/ajaxquerygoodslist.do.html'、 ''、 'goodslistcontainer'、 '13855'、listpagecallback）;"/>> </li> </ul>
2。最初にページに2つの隠しフィールドを置きます。1つは現在のページ番号、もう1つは合計ページ番号です。合計ページ番号はページが読み込まれ、バックグラウンドからクエリ後に値が直接添付されます。現在のページ番号の操作がない場合は、現在のページ番号に値を割り当てる必要があります。
<input id = "jiazai" type = "hidden"> </input> <！ - currentページ番号 - > <入力id = "totalpage" type = "hidden"> </input> <！ - 合計ページ番号 - >
3.ページにロードされた関数を書き込み、合計ページ番号と現在のページ番号に値を割り当てます。
$（function（）{$（ '＃jiazai'）。val（1）; //現在のページ番号を割り当てる、デフォルトはajaxFunction（page、arg、chipssort、 ''）; //この方法は抽出されたajaxバックグラウンドアクセス方法}）;4.抽出されたAJAXメソッド。このページはこの方法を数回使用し、ページのデータがAjaxを介してバックグラウンドから取得され、背景がリストコレクションを返すため、すべてが収集されます。
// ajax関数ajaxfunction（page、arg、chipssort、fontval）を抽出する方法{$。ajax（{type： 'post'、url： '/admin/receptchips/showlist'、//要求されたurlアドレスデータ：{page、sort：arg、chipssort：chipsort、fontval：fontval}、datatype： 'json'、contentType： 'application/x-www-form-urlencoded'、success：function（data） CommonFunction（data）;}}）;}3.見るべきコードはあまりありません、最後のコードはありません
//文字列スペル機能の抽出方法commonFunction（data）{$（ '＃projectlist'）。find（ "li"）。remove（）; （data.length> 0）{// setページ番号var pading = data [0] .padingnum; //合計ページ番号$（ '＃totalpage'）。 id = 'currentPageno'> "+page+" </b>/"+パディング+" "）; $（ '＃span_number'） onclick = 'indexpage（-2）'/good/ajaxquerygoodslist.do.html '、' '、' goodslistcontainer '、' "+パディング+" '、listPageCallback）;' class = 'page-btn'/> "）} else {$（ '＃countpage'）。html（" <b id = 'currentPageno'> "+0+" </b>/"+0+" "）;} //設定ページの下部はホームページです。 href = "javascript：void（0）;" var nowpage = $（ '＃jiazai'）。 ）{$（ '＃one'）。text（1）; $（ '＃one'） （3）; $（ '＃3'） ttr（ 'href'、 'javascript：pagenum（ "'+（4）+'"）;'）; $（ '＃fore'）。text（5）; $（ '＃fore'）。text（5）; $（ '＃fore'）。 e '）。 owpage）-2）; $（ '＃one'）。 +（number（nowpage）-1）+'"）;'）; $（ '＃3'）。text（nowpage）; $（ '＃three'） if（number（nowpage）+1>パディング）{$（ '＃5'）。parent（）。hide（）; hide（）; $（ '＃fore'）。hide（）。yels {$（ '＃5'） owpage）+1）; $（ '＃5'）。 lse {$（ '＃fore'）。parent（）。show（）; $（ '＃fore'）。text（number（nowpage）+2）; $（ '＃fore'）。 hide if（パディング== 0）{$（ '＃one'）。parent（）。hide（）; $（ '＃two'）。hide（）; $（ '＃three'）。parent（）。hide（）; $（ '＃five'） if（pading == 1）{$（ '＃shouye'）。hide（）; $（ '＃weiye'）。hide（）; $（ '＃one'）。hide（）; hide（）; $（ '＃two'）。parent（ ）.hide（）; $（ '＃three'）。parent（）。hide（）; $（ '＃5'）。parent（）。hide（）; $（ '＃fore'）。parent（）。hide（）;} else if（pading == 2）{$（ '＃one'）。parent（）。show（）; $（ '＃two'）。show（）; $（ '＃three'）。parent（） if（パディング== 3）{$（ '＃one'）。parent（）。show（）; $（ '＃two'）。show（）; $（ '＃three'）。parent（）。show（）; $（ '＃five'） if（pading == 4）{$（ '＃one'）。parent（）。show（）; $（ '＃two'）。show（）。show（）; $（ '＃three'）。parent（）。show（）; show（ '＃five'）。 ）.Parent（）。show（）; $（ '＃two'）。parent（）; show（）; $（ '＃three'）。show（） a '）。各（function（）{$（this）.parent（）。removeclass（ "current"）; if（$（this）.text（）== nowpage）{$（this）.parent（ "current（" current "）;}}）; //ページのトップに戻る500）; //最後に、1 $（ '＃jiazai'）。val（number（bianlaing）+number（1））; }さて、ページはここで完成しています。使用する必要がある場合は、私のコードを理解するのに時間がかかる場合があります。実際、コードは難しくありません。私はそれを書くためにそれを2時間使用しました。 1行を1行読み、コメントを自分で追加してください。この作品を手に入れれば、30分以内に間違いなく行われます！