PHP+jQuery 長い記事ページング クラス (URL / ajax ページング メソッドをサポート)、
<span>/*</span><span>
******* 环境:Apache2.2.8 ( 2.2.17 ) + PHP5.2.6 ( 5.3.3 ) + MySQL5.0.51b ( 5.5.8 ) + jQuery-1.8<br /> ******* 其它组件：jQuery-1.8.3.min.js + Smarty 3.1.18 + TinyMCE 4.1.6
******* Date：2014-10-20
******* Author：小dee
******* Blog：http://www.cnblogs.com/dee0912/
</span><span>*/</span>
ログイン後にコピー
前に書かれている:
1. リストページングであっても、記事ページングであっても、現在のページの前後のオフセットをどのように扱うか、つまり、状況に応じてどのページ番号要素を表示し、どの要素を表示しないかを考慮することが重要です。 ) と計算 (ページ番号の表示)、これらの主要なメソッドは URL ページング中にページング クラス ファイルに書き込まれ、ajax ページング中に js ファイルに書き込まれます。
2. Ajax ページングを使用する場合、live() メソッドを使用して、jQuery によって動的に追加された要素もイベント処理関数 (ajax_arc.js ファイル) にバインドできるようにします
この機能モジュールの主なファイルには、長い記事ページング クラス arc_page.class.php と、Ajax 記事ページング用の ajax_arc.js が含まれています。含まれる関数は次のとおりです。
1. 記事のコンテンツは URL を使用してページネーションできます。ページネーション後の URL パラメータは p です。
2. Ajax を使用して記事のコンテンツをページ分割してページ番号を表示できます。
3. リストページングクラスと同様に、「前のページ」と「次のページ」のテキストを変更できます
その他: このモジュールのページング機能を使用すると、エディターはページング用に手動で改ページを挿入できます。
このモジュールは
TinyMCE (4.1.6)
エディタ
と一緒に使用されます
TinyMCE エディターのダウンロード アドレス: http://www.tinymce.com/download/download.php、tinymce フォルダーを解凍してルート ディレクトリに配置します。
言語パックのダウンロード アドレス: http://www.tinymce.com/i18n/index.php、中国語 (中国) を選択し、langs フォルダー内の zh_CN.js を解凍して tinymce/langs ディレクトリに置きます。
tinymce/tinymce.min.js ファイルをテンプレートに導入します。
その他の利用方法についてはブログをご覧ください：http://www.cnblogs.com/nkxyf/p/3883586.html
レンダリング:
URLのページネーション
写真1.
写真2.
写真 3.
ajax ページネーション
写真1.
写真2.
モジュールファイル構造図:
ROOT:
§─conn
│ └─conn.php
│§─libs -- スマートなライブラリ │
§─templates
│ │
│ §─add_article.html -- 記事テンプレートを追加
│ §─view_article .html -- フロントエンド記事ページのテンプレート
│ §─list.html -- フロントエンド リスト ページのテンプレート
│ §─success.html -- 操作が成功したときにテンプレートを表示します
│ §─error.html - - 操作失敗時にテンプレートを表示
│ │
│ ├─css
│ │
│ §─images
│ │ └─loading.gif -- ajax ページング時にリクエストデータを受信する前のローディング画像
│ │
│ ━─js
│ │
│ § ─jquery-1.8.3.min.js
│ │
│ §─showTime.js -- 操作成功時または失敗時のカウントダウンジャンプファイル
│ │
│ §─ajax_arc .js -- ページング方式が ajax の場合 記事ページテンプレートで読み込まれる js view_article.html
│ │
│ └─ajax.js -- ページングモードが ajax の場合、リストページテンプレート list.html で読み込まれる js
│
├─templates_c
│
§─tinymce -- エディター
│
§─init.inc.php -- Smarty 設定ファイル
│
├─list_page.class.php -- リスト・ページング・クラス
│
§─ arc_page.class.php -- 記事ページング クラス
│
§─list.php -- リスト ページ
│
§─view_article.php -- 記事ページ
│
├─ajaxarc.php -- 実行中にリクエストを受け入れる PHP ファイル記事ページの ajax ページネーション
│
§─ajaxpage.php - - リストページの ajax ページネーション中に、要求された php ファイルを受け入れます
│
└─ins.php -- 記事 php ファイルを追加します
メインコード:
記事を追加する (templates/add_article.html、add_article.php、ins.php)
templates/add_article.html
![PHP+jQuery 長い記事ページング クラス (URL / ajax ページング メソッドをサポート)、_PHP チュートリアル]()
1 DOCTYPE html>
2 <html>
3 <頭>
4 <メタcharset="utf-8">
5 <タイトル>PHP文章分页类タイトル>
6 <link href="<{$Template_Dir}>/css/style_control.css" rel="スタイルシート" type="text/css 「>」
7 <スクリプトsrc="<{$Template_Dir}>/js/jquery-1.8.3.min.js">スクリプト> ;
8
9
10 <スクリプトsrc="<{$ROOT_URL}>tinymce/tinymce.min.js">スクリプト>
11 <スクリプト>
12
13 tinymce.init({
14
15 セレクター:'#content'、//编辑エリア
16 テーマ: 「モダン」、//主题
17 言語: "zh_cn"、//语言(中文需要到官网下ダウンロード)
18
19 幅:800, //编辑框宽
20 身長: 300、//编辑框高
21
22 プラグイン: [
23
24 "advlist 自動リンク リスト リンク イメージ チャームマップ 印刷プレビュー hr アンカー改ページ",
25 "searchreplace wordcount Visualblocks Visualchars code fullscreen",
26 "挿入日時メディア非破壊保存テーブルコンテキストメニューの方向性",
27 「顔文字テンプレートペーストテキストカラーカラーピッカーテキストパターン」
28 ]、
29
30 //第一行工具栏
31 ツールバー1: "insertfile undo redo |styleselect |bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
32
33 //第二行工具栏
34 ツールバー2: 「印刷プレビューメディア | 前カラーバックカラー絵文字」、
35
36 image_advtab: 本当、
37
38 //初回提供の默认格式
39 style_formats: [
40 {タイトル: '太字'、インライン: 'b'}、
41 {タイトル: '赤いテキスト'、インライン: 'スパン'、スタイル: {color: ' #ff0000' }}、
42 {タイトル: 'レッドヘッダー'、ブロック: 'h1'、スタイル: {color: ' #ff0000' }}、
43 {タイトル: '例 1'、インライン: 'スパン'、クラス: '例1'}、
44 {タイトル: '例 2'、インライン: 'スパン'、クラス: '例2'}、
45 {title: 'テーブルスタイル'}、
46 {タイトル: 'テーブル行 1'、セレクター: 'tr'、クラス: ' テーブル行1'}
47 ]
48 });
49
50 スクリプト>
51 頭>
52 <ボディ>
53
54 <フォームid="arc_form"アクション="ins.php"メソッド="post">
55
56 标题:<br />
57 <input type="text" id="title" name="title" autocomplete="off"/&gと; <br /><br />
58 内容:<br />
59 <テキストエリアid="コンテンツ"名前="コンテンツ">テキストエリア>><br /> ;
60 <input type="button" id="sub" value="提交" />
61
62 フォーム>
63
64 ボディ>
65 <スクリプト>
66
67 $(関数(){
68
69 $("#sub").click(function(){
70
71 if($("#title").val() !=""){
72
73 $("#arc_form").submit();
74 }else{
75
76 alert("标题は空");
77 }
78 });
79 });
80 スクリプト>
81 html>
コードを表示
前台显示如图：
add_article.php
![PHP+jQuery 長い記事ページング クラス (URL / ajax ページング メソッドをサポート)、_PHP チュートリアル]()
1 php
2
3 「init.inc.php」が必要;
4
5 $smarty->assign("ROOT",ROOT);
6 $smarty->assign("ROOT_URL",ROOT_URL);
7 $smarty->assign("Template_Dir",Template_Dir);
8
9 $smarty->display("add_article.html");
コードを表示
ins.php![PHP+jQuery 長い記事ページング クラス (URL / ajax ページング メソッドをサポート)、_PHP チュートリアル]()
1 php
2
3 必須 'conn/conn.php';
4 require 'init.inc.php';
5
6 if(isset($_POST['title']) && !empty($_POST['title'])){
7
8 if(get_magic_quotes_gpc()){
9
10 $title = trim($_POST['title']);
11
12 }他{
13
14 $title = addslashes(trim($_POST['title']));
15 }
16 }
17
18 if(isset($_POST['content']) && !empty($_POST['content'])){
19
20 $content = htmlspecialchars($_POST['content']);
21 }
22
23 関数 check_input($value){
24
25 // 如果不是数字则加引号
26 if (!is_numeric($value)){
27
28 $value = mysql_real_escape_string($value);
29 }
30 返品 $value;
31 }
32
33 $title = check_input($title);
34
35
36 //插入据
37 $sql = "アーカイブに挿入 (タイトル、コンテンツ、公開日) 値('".$title."','".$content."','".time( )."')";
38
39
40 if($conne->uidRst($sql) == 1){
41
42 //当分の間セッションに残っています
43 $_SESSION['t'] = $t;
44
45 $smarty->assign("Template_Dir",Template_Dir);
46 $smarty->assign("ROOT_URL",$ROOT_URL);
47
48 //ジャンプ转パラメータ
49 $smarty->assign("do","追加");
50 $smarty->assign("addr","列表页");
51 $smarty->assign("url","list.php");
52
53 $smarty->display("success.html");
54 }他{
55
56 $smarty->assign("Template_Dir",Template_Dir);
57 $smarty->assign("ROOT_URL",$ROOT_URL);
58
59 //ジャンプ转パラメータ
60 $smarty->assign("do","追加");
61 $smarty->assign("addr","追加页");
62 $smarty->assign("url","add_article.php");
63
64 $smarty->display("error.html");
65 }
コードを表示
TinyMCE コンバータは、ユーザーが入力したコンテンツを自動的に前後に追加します。文字だけでなく、写真、ビデオなどの富メディアも含まれます。 ，如：
写真：
ビデオ：
分页( arc_page.class.php , templates/js/ajax_arc.js , ajaxarc.php )arc_page.class.php
![PHP+jQuery 長い記事ページング クラス (URL / ajax ページング メソッドをサポート)、_PHP チュートリアル]()
1 php
2
3 クラス MyArcPage{
4
5 プライベート $コンテンツ;
6 プライベート $改ページ;
7 private $url; // パラメータ p の現在の URL
8
9 //ページ番号表示
10 private $prePage //ページ前オフセット;
11 private $floPage //ページ番号の後のオフセット
12 プライベート $pageNow //現在のページ番号;
13 プライベート $合計ページ;
14
15 private $page_act // ページめくりスタイル 0:url 1:ajax
16
17 //ページ番号テキスト
18 プライベート $firstFonts = "ホーム";
19 プライベート $lastFonts = "最後のページ";
20
21 プライベート $nextFonts = "次のページ >";
22 プライベート $preFonts = "< 前のページ";
23
24 //ページ番号を表示
25 プライベート $pageShow = "";
26
27
28 //パラメータ: 記事の内容、改ページのHTMLコード、ページング方法、現在のURLのpパラメータ
29 function __construct($content,$pagebreak,$page_act,$p,$prePage,$floPage){
30
31 $this->コンテンツ = $content;
32 $this->改ページ = $改ページ;
33 $this->floPage = $floPage;
34 $this->prePage = $prePage;
35
36 $this->page_act = $page_act;
37
38 $this->p = $p;
39 }
40
41 /*******************************改ページがないか確認してください***** ******* ***********/
42 パブリック 関数 check(){
43
44 //改ページが含まれているかどうかを検出します
45 if(strpos($this->コンテンツ,$this->改ページ) === false){
46
47 //改ページは含まれません
48 戻る $this->コンテンツ;
49 }他{
50
51 //改ページが含まれています
52 $contentArr = explode($this->改ページ,$this->content);
53 戻る $contentArr;
54 }
55 }
56
57 /*************現在のページ番号を取得、$_GET['p']******を受け取る*******/
58 パブリック 関数 getPageNow(){
59
60 if(!isset($this->p)){
61
62 $this->pageNow = 1;
63 }else if($this->p>0){
64
65 $this->pageNow = $this->p;
66 }他{
67
68 die("ページ番号エラー");
69 }
70
71 戻る $this->ページ今すぐ;
72 }
73
74 /*******************************現在のページのリンクを設定******** ******** *************/
75 パブリック 関数 getUrl(){
76
77 $url = "http://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
78
79 //パラメータがあるかどうかを判断する
80 if(strpos($url,"?") === false){ //パラメータなし
81
82 return $this->url = $url."?";
83 }else{ //パラメータ付き
84
85 $url = 爆発("?",$url);
86 //パラメータ
87 $param = $url[1];
88
89 //複数のパラメーターがあるかどうかを判断します
90 if(strpos($param,"&") === false){ //にはパラメータが 1 つだけあります
91
92 //パラメータが p かどうかを判断します
93 if(strpos($param,"p=") === false){ //にはパラメータpが含まれていません
94
95 // URL を結合
96 $url = 爆破("?",$url);
97
98 戻る $this->url = $url."&";
99
100 }他{
101
102 //パラメータpを削除
103 $url = $url[0];
104
105 戻る $this->url = $url."?";
106 }
107
108 }else{ //複数のパラメータ
109
110 $param = 爆発("&",$param);
111
112 //パラメータ配列を走査する
113 foreach($param as $k=>$v){
114
115 if(strpos($v,"p=") === false){
116
117 続ける;
118 }他{
119
120 //パラメータpが含まれている場合は配列から削除します
121 設定解除($param[$k]);
122 }
123 }
124
125 //パラメータpを削除した後に配列を結合する
126 $param = 爆破("&",$param);
127 $url[1] = $param;
128 $url = 爆破("?",$url);
129
130 戻る $this->url = $url."&";
131 }
132 }
133 }134
135 /*******************************オフセット前処理******** **** *****************/
136 public function preOffset($preFonts){
137
138 $this->getPageNow();
139 $this->getUrl();
140 $this->getPreFonts($preFonts);
141
142 //オフセット前処理
143 if($this->pageNow!=1 && ($this->pageNow - $this->prePage -1 <= 1)){
144
145 //前のページ
146 $this->pageShow .= "$this->url."p=".($this ->pageNow-1)."">".($preFonts == ""?$this->preFonts:$preFonts)."";
147
148
149 //ページ番号
150 for($i=1;$i<=$this->pageNow-1;$i++){
151
152 //ajaxモードが表示されない
153 //if($this->page_act != 1){
154
155 $this->pageShow .= "$this->url."p=".$i.""> ".$i."";
156 //}
157 }
158
159 }else if($this->pageNow - $this->prePage -1 > 1){ //pageNow は少なくとも大きい場合にのみ表示されます2.「1 ...」よりも
160
161 //ホームページ
162 $this->pageShow .= "$this->url."p=1">"。 $this->firstFonts."";
163
164 //前のページ
165 $this->pageShow .= "$this->url."p=".($this ->pageNow-1)."">".($preFonts == ""?$this->preFonts:$preFonts)."";
166
167 for($i=$this->prePage;$i>=1;$i--){
168
169 // 現在のページと「...」の間のページ番号は、ajax モードでは表示されません
170 //if($this->page_act != 1){
171
172 $this->pageShow .= "$this->url."p=".($this-> pageNow-$i)."">".($this->pageNow-$i)."";
173 //}
174 }
175 }
176 }177
178 /**************************ページ番号とバックオフセット処理************ ****** *************/
179 public function floOffset($nextFonts){
180
181 $this->getPageNow();
182 $this->getTotalPage();
183 $this->getUrl();
184 $this->getNextFonts($nextFonts);
185
186 if($this->totalPage > $this->floPage){ //総ページ数がバックオフセットより大きい場合
187
188 for($i=0;$i<=$this->floPage;$i++){
189
190 $page = $this->pageNow+$i;
191
192 if($page<=$this->totalPage){
193
194 //ページ番号、ajaxメソッドが表示されない
195 //if($this->page_act != 1){
196
197 $this->pageShow .= "$this->url."p=".$page.""> ;".$ページ."";
198 //}
199 }
200 }
201
202 if($this->pageNow < $this->totalPage){
203
204 $this->pageShow .= "$this->url."p=".($this ->pageNow+1)."">".($nextFonts == ""?$this->nextFonts:$nextFonts).""; / /オブジェクトのインスタンス化時にユーザーによって渡されたテキストが空の場合、クラスのデフォルトの「次のページ」が呼び出され、それ以外の場合はユーザーによって渡された値が出力されます
205
206 if(($this->pageNow+$this->floPage+1)<$this->totalPage){
207
208 $this->pageShow .= "$this->url."p=".$this ->totalPage."">最後のページ";
209 }
210
211 }else if($this->pageNow > $this->totalPage){
212
213 die("ページ範囲外");
214 }
215 }else{ //総ページ数がバックオフセット未満の場合
216
217 if($this->pageNow < $this->totalPage){ //現在のページが総ページ数より小さい場合
218
219 for($i=0;$i<$this->totalPage;$i++){
220
221 $page = $this->pageNow+$i;
222
223 if($ページ < $this->合計ページ){
224
225 //if($this->page_act != 1){
226
227 //ページ番号の後枠
228 $this->pageShow .= "$this->url."p=".$page.""> ;".$ページ."";
229 //}
230
231 }else if($page == $this->totalPage){
232
233 //if($this->page_act != 1){
234
235 $this->pageShow .= "$this->url."p=".$page.""> ;".$ページ."";
236 //}
237 }else if($this->pageNow > $this->totalPage){
238
239 die("超出页码范围");
240 }
241 }
242
243 $this->pageShow .= "$this->url."p=".($this ->pageNow+1)."">".$this->nextFonts."";
244 }else if($this->pageNow > $this->totalPage){
245
246 die("超出页码范围");
247 }else{ //当前页等总页数
248
249 //if($this->page_act != 1){
250
251 $this->pageShow .= "$this->url."p=".$this ->totalPage."">".$this->totalPage."";
252 //}
253 }
254 }
255 }
256
257 /********************その他它页面情報******************* ***/
258 public function getOtherInfo(){
259
260 $this->pageShow .= " 当前第".$this->pageNow."页" ;
261 $this->pageShow .= "/共".$this->totalPage."页";
262
263 戻る $this->ページ表示;
264 }
265
266 /* ********************获取上一页、下一页文字************* ****** */
267 public function getPreFonts($preFonts){
268
269 return $this->preFonts = ($preFonts=="")?$this->preFonts:$preFonts;
270 }
271
272 public function getNextFonts($nextFonts){
273
274 return $this->nextFonts = ($nextFonts=="")?$this->nextFonts:$nextFonts;
275 }
276
277
278
279 /******************************获得总页数页******** **************************/
280 public function getTotalPage(){
281
282 //检测コンテンツが数组であるかどうか
283 if(is_array($this->check())){ //content内容分页符才分页
284
285 //总页数
286 return $this->totalPage = count($this->check());
287 }他{
288
289 戻る $this->合計ページ = 1;
290 }291 }
292
293 /************************************ページ******* ***** ********************************/
294 公開 関数 page(){
295
296 //一般的に記事にはページネーションがあまりないので、ページングスタイルとして list_page.class.php の style2 を使用するだけです。
297 //ページ番号に戻る
298 return $this->preOffset($preFonts,$this->prePage).$this->floOffset($nextFonts,$this -&g t ;floPage).$this->getOtherInfo();
299 }
300 }
コードを表示
このファイルには、改ページが含まれているかどうかを検出するメソッドが含まれています。改ページが含まれている場合、受信コンテンツは改ページに従って分割され、そうでない場合は文字列が返されます。
templates/js/ajax_arc.js
![PHP+jQuery 長い記事ページング クラス (URL / ajax ページング メソッドをサポート)、_PHP チュートリアル]()
1 $(
関数(){
2
3 //初期表示「次のページ」「最後のページ」
4 showFloPage();
5
6 //元のliを削除してgifを挿入します
7 関数 ajaxpre(){
8
9 //GIFを挿入
10 $loading = $("
![]()
"
);
11
12 $("#content"
).html($loading);
13 }
14
15 // ページめくり情報を非表示にする
16 関数 infoAct(){
17
18 //現在のページが最後のページに到達すると、「次のページ」と「最後のページ」
19 if(parseInt($("#pageNow").val()) == parseInt($("#totalPage"
).val())){
20
21 $("#flo_page"
).hide();
22 $("#last_page"
).hide();
23
24 $("#pre_page"
).show();
25 $("#first_page"
).show();
26
27 }
else if(parseInt($("#pageNow").val()) == 1){
//現在のページが到着したときに「ホーム」と「前のページ」を非表示にします
28
29 $("#pre_page"
).hide();
30 $("#first_page"
).hide();
31
32 $("#flo_page"
).show();
33 $("#last_page"
).show();
34
35 }
他{
36
37 $("#pre_page"
).show();
38 $("#first_page"
).show();
39
40 $("#flo_page"
).show();
41 $("#last_page"
).show();
42 }
43 }
44
45 //「次のページ」と「最後のページ」をクリックすると、「ホーム」と「前のページ」が表示されます
46 関数 showPage(){
47
48 //ホームページ
49 $firstPage = $("
ホームページ"
);
50
51 if($("#first_page").length == 0
){
52 $firstPage.insertBefore($(".ajaxpage:first"
));
53 }
54
55 //前のページ
56 $pre_page = $("
"+$preFonts+""
);
57
58 if($("#pre_page").length == 0
){
59 $pre_page.insertBefore($(".ajaxpage:first"
));
60 }
61 }
62
63 //「前のページ」と「ホームページ」をクリックすると、「次のページ」と「最後のページ」が表示されます
64 関数 showFloPage(){
65
66 //次のページ
67 $flo_page = $("
"+$preFonts+""
);
68
69 if($("#flo_page").length == 0
){
70 $flo_page.insertAfter($(".ajaxpage:last"
));
71 }
72
73 //最後のページ
74 $lastPage = $("
最後のページ"
);
75
76 if($("#last_page").length == 0
){
77 $lastPage.insertAfter($("#flo_page"
));
78 }
79 } 80
81 //ajaxリクエストデータ
82 関数 ajaxpost(){
83
84 $.post("ajaxarc.php"
,{
85
86 pageNow : parseInt($("#pageNow"
).val()),
87 id : parseInt($("#id"
).val()),
88 ページ区切り : $("#pagebreak"
).val()
89 },
function(data,textStatus){
90
91 //gifを削除
92 $(".loading"
).remove();
93
94 $("#content"
).html(data);
95 });
96 }
97
98
99 //初期値=1
100 apagenow = parseInt($("#pageNow"
).val());
101
102 //ajax 「ホームページ」 最初は「ホームページ」と「前のページ」が表示されないため、「ホームページ」は「次のページ」と「最後のページ」のクリック関数でしか呼び出せません」と「前ページ」機能
103 関数 firstPageAct(){
104
105 if($("#first_page").is(":visible"
)){
106
107 $("#first_page").live('click',
function(){
108
109 //更新する前にを削除してください
110 ajaxpre();
111
112 //ページが 1 に設定されました
113 $("#pageNow").val(1
);
114 apagenow = parseInt($("#pageNow"
).val());
115
116 //ページ番号情報を変更します
117 $("#pagenow_info").html(" 現在のページ 1"
);
118
119 //ポストオフセットページング
120 flopage($("#pageNow"
).val());
121
122 //ajaxリクエストデータ
123 ajaxpost();
124
125 //「ホーム」に到達した後、「ホーム」と「前のページ」を非表示にします
126 infoAct();
127
128 //ページ番号にスタイルを追加します
129 セルページ();
130 });
131 }
132 }
133
134 関数 lastPageAct(){
135
136 if($("#last_page").is(":visible"
)){
137
138 $("#last_page").live('click',
function(){
139
140 //更新する前にを削除してください
141 ajaxpre();
142
143 //ページが 1 に設定されました
144 $("#pageNow").val($("#totalPage"
).val());
145 apagenow = parseInt($("#pageNow"
).val());
146
147 //ページ番号情報を変更します
148 $("#pagenow_info").html(" 現在のページ "+apagenow+""
);
149
150 //ポストオフセットページング
151 flopage($("#pageNow"
).val());
152
153 if($("#first_page").is(":hidden") || $("#first_page").length == 0
){
154
155 //「ホーム」と「次のページ」が表示されます
156 showPage();
157 showFloPage();
158 firstPageAct();
159 lastPageAct();
160 prePageAct();
161 }162
163 //ajaxリクエストデータ
164 ajaxpost();
165
166 //「ホーム」に到達したら「ホーム」と「前のページ」を非表示にする
167 infoAct();
168
169 //ページ番号にスタイルを追加します
170 セルページ();
171 });
172 }
173 }
174
175 //ajax "前のページ"
176 関数 prePageAct(){
177
178 if($("#pre_page").is(":visible"
)){
179
180 $("#pre_page").click(
function(){
181
182 //更新する前にを削除してください
183 ajaxpre();
184
185 //「前のページ」をクリックするたびに、隠しドメインの値が -1 になります
186 if(parseInt(apagenow) != 1
){
187
188 apagenow = parseInt(apagenow) - parseInt(1
);
189 }
190
191 $("#pageNow"
).val(apagenow);
192
193 //前後オフセットページング
194 flopage($("#pageNow"
).val());
195
196 //隠しドメインのページ番号の値が1より大きい場合
197 if(parseInt($("#pageNow").val()) > parseInt(1
)){
198
199 //ページ番号情報を変更します
200 $("#pagenow_info").html(" 現在のページ"+$("#pageNow").val()+"ページ"
);
201 }
202
203 //ajaxリクエストデータ
204 ajaxpost();
205
206 if($("#first_page").is(":hidden") || $("#first_page").length == 0
){
207
208 //「ホーム」と「次のページ」が表示されます
209 showPage();
210 showFloPage();
211 firstPageAct();
212 lastPageAct();
213 prePageAct();
214 }
215
216 //最初のページの「ホーム」と「前ページ」を非表示にする
217 infoAct();
218
219 //ページ番号にスタイルを追加します
220 セルページ();
221 });
222
223 }
224 }225
226 //ajax「次のページ」
227 if($("#flo_page").length>0
){
228
229 // aのhref属性を削除します
230 $("#flo_page").removeAttr("href"
);
231
232 $("#flo_page").live('click',
function(){
233
234 ajaxpre();
235
236 //「次へ」をクリックするたびに、隠しドメインの値が+1されます
237 apagenow = parseInt(apagenow) + parseInt(1
);
238
239 $("#pageNow"
).val(apagenow);
240
241 //ポストオフセットページング
242 flopage($("#pageNow"
).val());
243
244 //隠しドメインのページ番号の値が総ページ番号未満の場合
245 if(parseInt($("#pageNow").val()) <= parseInt($("#totalPage"
).val())){
246
247 //ページ番号情報を変更します
248 $("#pagenow_info").html(" 現在のページ"+$("#pageNow").val()+"ページ"
);
249
250 //ajaxリクエストデータ
251 ajaxpost();
252 }
253
254 //「次のページ」をクリックすると「ホーム」が表示されます
255 if($("#first_page").is(":hidden") || $("#first_page").length == 0
){
256
257 //「ホーム」と「次のページ」が表示されます
258 showPage();
259 showFloPage();
260 firstPageAct();
261 lastPageAct();
262 prePageAct();
263 }
264
265 //「次のページ」と「最後のページ」を非表示にする
266 infoAct();
267
268 //ページ番号にスタイルを追加します
269 セルページ();
270
271 戻る false //クリックしてページをめくってください
272 });
273 }
274
275 //ajax「最後のページ」
276 if($("#last_page").length>0
){
277
278 // aのhref属性を削除します
279 $("#last_page").removeAttr("href"
);
280
281 $("#last_page").live('click',
function(){
282
283 ajaxpre();
284
285 //隠しドメインの現在のページ情報を変更します
286 apagenow = parseInt($("#totalPage"
).val());
287 $("#pageNow"
).val(apagenow);
288
289 //ページ番号情報を変更します
290 $("#pagenow_info").html(" 現在のページ "+$("#totalPage").val()+"ページ"
);
291
292 //ポストオフセットページング
293 flopage($("#pageNow"
).val());
294
295 //ajaxリクエストデータ
296 ajaxpost();
297
298 //「最後のページ」をクリックすると「ホーム」が表示されます
299
300 if($("#first_page").length == 0
){
301
302 showPage();
303 showFloPage();
304 firstPageAct();
305 lastPageAct();
306 prePageAct();
307 }308
309 infoAct();
310
311 //ページ番号にスタイルを追加します
312 セルページ();
313
314 戻る false;
315 });
316 }
317
318 //タグジャンプをキャンセル
319 $("#first_page").live('click',
function(){
320
321 戻る false;
322 });
323
324 $("#pre_page").live('click',
function(){
325
326 戻る false;
327 });
328
329 //特定のページ番号のhrefを削除します
330 $(".ajaxpage").removeAttr("href"
);
331
332
333 //live() を使用すると、jQuery によって動的に追加された要素をイベント ハンドラーにバインドできます
334 $(".ajaxpage").live('click',
function(){
335
336 ajaxpre();
337
338 //「次へ」をクリックするたびに、隠しフィールドの値が現在のaタグで表示されているページ番号に変わります
339 apagenow = $(
this).text();
340
341 $("#pageNow"
).val(apagenow);
342
343 //ポストオフセットページング
344 flopage($("#pageNow"
).val());
345
346 //ページ番号情報を変更します
347 $("#pagenow_info").html(" 現在のページ"+$("#pageNow").val()+"ページ"
);
348
349 $(".ajaxpage").removeClass("selected"
);
350
351 $(
this).each(
function(){
352
353 if($(
this).text() == $("#pageNow"
).val()){
354
355 $(
this).addClass("選択済み"
);
356 }
357 })
358
359 if($("#first_page").is(":hidden") || $("#first_page").length == 0
){
360
361 //「ホーム」と「次のページ」が表示されます
362 showPage();
363 showFloPage();
364 firstPageAct();
365 lastPageAct();
366 prePageAct();
367 }
368
369 infoAct();
370
371 //ページ番号にスタイルを追加します
372 セルページ();
373
374 ajaxpost();
375 });
376
377 //「前のページ」「次のページ」ページ番号にスタイルを追加します
378 関数 selpage(){
379
380 //ページ番号にスタイルを追加します
381 $(".ajaxpage").removeClass("selected"
);
382 $(".ajaxpage").each(
function(){
383
384 if($(
this).text() == $("#pageNow"
).val()){
385
386 $(
this).addClass("選択済み"
);
387 }
388 })
389
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
