PHP+jQuery long article paging class (supports url / ajax paging method),
<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>
Copy after login
Written in front:
1. Whether it is list paging or article paging, the key point is how to handle the offset before and after the current page, that is, to consider (which page number elements should be displayed and which should not be displayed in different situations) and calculation (how many page numbers are displayed), these key methods are written into the paging class file when the url is paginated, and written into the js file during the ajax paging;
2. When using ajax paging, use the live() method to enable elements dynamically added by jQuery to be bound to event handling functions (ajax_arc.js file)
The main files of this functional module include two files: arc_page.class.php for long article paging and ajax_arc.js for ajax article paging. The functions included are:
1. The article content can be paginated using url, and the url parameter after pagination is p;
2. The article content can be paginated using ajax to display page numbers;
3. Like the list paging class, you can change the "previous page" and "next page" text
Others: The paging function of this module allows the editor to manually insert page breaks for paging.
This module is used with the TinyMCE (4.1.6) editor
TinyMCE editor download address: http://www.tinymce.com/download/download.php, unzip the folder tinymce and place it in the root directory;
Language pack download address: http://www.tinymce.com/i18n/index.php, select Chinese (China), unzip and put zh_CN.js in the langs folder into the tinymce/langs directory;
Introduce the tinymce/tinymce.min.js file into the template;
For other usage methods, please refer to the blog: http://www.cnblogs.com/nkxyf/p/3883586.html
Rendering:
url pagination
Figure 1.
Figure 2.
Figure 3.
ajax pagination
Figure 1.
Figure 2.
Module file structure diagram:
ROOT:
├─conn
│ └─conn.php
│
├─libs -- smarty library
│
├─templates
│ │
│ ├─add_article.html -- Add article template
│ ├─view_article.html -- Front-end article page template
│ ├─list.html -- Front-end list page template
│ ├─success .html -- Display the template when the operation is successful
│ ├─error.html -- Display the template when the operation fails
│ │
│ ├─css
│ │
│ ├─images
│ │ └─loading.gif -- The loading image before receiving the request data during ajax paging
│ │
│ └─js
│ │
│ ├─jquery-1.8.3 .min.js
│ │
│ ├─showTime.js -- Countdown jump file when the operation succeeds or fails
│ │
│ ├─ajax_arc.js -- When the paging method is js
│ │
│ └─ajax.js loaded by the article page template view_article.html when using ajax -- js
│
├ loaded by the list page template list.html when the paging mode is ajax ─templates_c
│
├─tinymce -- Editor
│
├─init.inc.php -- smarty configuration file
│
├─list_page.class.php - - List paging class
│
├─arc_page.class.php -- Article paging class
│
├─list.php -- List page
│
├─view_article. php -- Article page
│
├─ajaxarc.php -- PHP file that accepts requests during ajax pagination on article pages
│
├─ajaxpage.php -- Accepts requests during ajax pagination on list pages php file
│
└─ins.php -- add article php file
Main code:
Add article (templates/add_article.html, add_article.php, ins.php)
templates/add_article.html
![PHP+jQuery long article paging class (supports url / ajax paging method), _PHP tutorial]()
1 DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>PHP文章分页类title>
6 <link href="<{$Template_Dir}>/css/style_control.css" rel="stylesheet" type="text/css">
7 <script src="<{$Template_Dir}>/js/jquery-1.8.3.min.js">script>
8
9
10 <script src="<{$ROOT_URL}>tinymce/tinymce.min.js">script>
11 <script>
12
13 tinymce.init({
14
15 selector:'#content', //编辑区域
16 theme: "modern", //主题
17 language: "zh_cn", //语言(中文需要到官网下载)
18
19 width:800, //编辑框宽
20 height: 300, //编辑框高
21
22 plugins: [
23
24 "advlist autolink lists link image charmap print preview hr anchor pagebreak",
25 "searchreplace wordcount visualblocks visualchars code fullscreen",
26 "insertdatetime media nonbreaking save table contextmenu directionality",
27 "emoticons template paste textcolor colorpicker textpattern"
28 ],
29
30 //第一行工具栏
31 toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
32
33 //第二行工具栏
34 toolbar2: "print preview media | forecolor backcolor emoticons",
35
36 image_advtab: true,
37
38 //初始时提供的默认格式
39 style_formats: [
40 {title: 'Bold text', inline: 'b'},
41 {title: 'Red text', inline: 'span', styles: {color: '#ff0000'}},
42 {title: 'Red header', block: 'h1', styles: {color: '#ff0000'}},
43 {title: 'Example 1', inline: 'span', classes: 'example1'},
44 {title: 'Example 2', inline: 'span', classes: 'example2'},
45 {title: 'Table styles'},
46 {title: 'Table row 1', selector: 'tr', classes: 'tablerow1'}
47 ]
48 });
49
50 script>
51 head>
52 <body>
53
54 <form id="arc_form" action="ins.php" method="post">
55
56 标题:<br />
57 <input type="text" id="title" name="title" autocomplete="off" /><br /><br />
58 内容:<br />
59 <textarea id="content" name="content">textarea><br />
60 <input type="button" id="sub" value="提交" />
61
62 form>
63
64 body>
65 <script>
66
67 $(function(){
68
69 $("#sub").click(function(){
70
71 if($("#title").val() != ""){
72
73 $("#arc_form").submit();
74 }else{
75
76 alert("标题不能为空");
77 }
78 });
79 });
80 script>
81 html>
View Code
前台显示如图：
add_article.php
![PHP+jQuery long article paging class (supports url / ajax paging method), _PHP tutorial]()
1 php
2
3 require '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");
View Code
ins.php
![PHP+jQuery long article paging class (supports url / ajax paging method), _PHP tutorial]()
1 php
2
3 require '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 }else{
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 function check_input($value){
24
25 // 如果不是数字则加引号
26 if (!is_numeric($value)){
27
28 $value = mysql_real_escape_string($value);
29 }
30 return $value;
31 }
32
33 $title = check_input($title);
34
35
36 //插入数据
37 $sql = "insert into archives (title,content,pubdate)values('".$title."','".$content."','".time()."')";
38
39
40 if($conne->uidRst($sql) == 1){
41
42 //当前时间存入session
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 }else{
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 }
View Code
把输入的文章内容使用htmlspecialchars()存入数据库。TinyMCE编辑器会自动把用户输入的内容前后加上
标签，不只是文字，也包括图片、视频等富媒体，如：
图片：
视频：
分页( arc_page.class.php , templates/js/ajax_arc.js , ajaxarc.php )
arc_page.class.php
![PHP+jQuery long article paging class (supports url / ajax paging method), _PHP tutorial]()
1 php
2
3 class MyArcPage{
4
5 private $content;
6 private $pagebreak;
7 private $url; //The url of the current parameter p
8
9 //Page number display
10 private $prePage; //Offset before page number
11 private $floPage; //Offset after page number
12 private $pageNow; //Current page number
13 private $totalPage;
14
15 private $page_act; //Page turning style 0:url 1:ajax
16
17 //Page number text
18 private $firstFonts = "Home";
19 private $lastFonts = "Last Page";
20
21 private $nextFonts = "Next page >";
22 private $preFonts = "< Previous Page";
23
24 //Show page number
25 private $pageShow = "";
26
27
28 //Parameters: article content, html code of page break, paging method, p parameter of current url
29 function __construct($content,$pagebreak,$page_act,$p,$prePage,$floPage){
30
31 $this->content = $content;
32 $this->pagebreak = $pagebreak;
33 $this->floPage = $floPage;
34 $this->prePage = $prePage;
35
36 $this->page_act = $page_act;
37
38 $this->p = $p;
39 }
40
41 /*******************************Check whether there is a page break** **********************/
42 public function check(){
43
44 //Detect whether there is a page break
45 if(strpos($this->content,$this->pagebreak) = == false){
46
47 //does not contain page breaks
48 return $this->content;
49 }else{
50
51 //contains page breaks
52 $contentArr = explode($this->pagebreak,$this->content);
53 return $contentArr;
54 }
55 }
56
57 /*************Get the current page number, receive $_GET['p']*******/
58 public function 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 }else{
67
68 die("page number error");
69 }
70
71 return $this->pageNow;
72 }
73
74 /*******************************Set current page link*** *************************/
75 public function getUrl(){
76
77 $url = "http://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
78
79 //Determine whether there are parameters
80 if(strpos($url,"?") === false){ //Without parameters
81
82 return $this->url = $url."?";
83 }else{ //with parameters
84
85 $url = explode("?",$url);
86 //Parameters
87 $param = $url[1];
88
89 //Determine whether there are multiple parameters
90 if(strpos($param,"&") === false){ //Only one parameter
91
92 //Determine whether the parameter is p
93 if(strpos($param,"p=") === false){ // does not contain parameter p
94
95 //Merge url
96 $url = implode("?",$url);
97
98 return $this->url = $url."&";
99
100 }else{
101
102 //Remove parameter p
103 $url = $url[0];
104
105 return $this->url = $url."?";
106 }
107
108 }else{ //Multiple parameters
109
110 $param = explode("&",$param);
111
112 //Traverse the parameter array
113 foreach($param as $k=>$v){
114
115 if(strpos($v,"p=") === false ){
116
117 continue;
118 }else{
119
120 //When parameter p is included, delete it from the array
121 unset($param[$k]);
122 }
123 }
124
125 //Combine the array after deleting parameter p
126 $param = implode("&",$param);
127 $url[1] = $param;
128 $url = implode("?",$url);
129
130 return $this->url = $url."&";
131 }
132 }
133 }134
135 /*******************************Pre-offset processing *******************************/
136 public function preOffset($preFonts){
137
138 $this->getPageNow();
139 $this->getUrl();
140 $this->getPreFonts($preFonts);
141
142 //Previous offset processing
143 if($this->pageNow!=1 && ($this->pageNow - $this ->prePage -1 <= 1)){
144
145 //Previous page
146 $this->pageShow .= "$this-> ;url."p=".($this->pageNow-1)."">".($preFonts == ""?$this ->preFonts:$preFonts)."";
147
148
149 //Page number
150 for($i=1;$i<=$this->pageNow- 1;$i++){
151
152 //ajax mode does not display
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){ //"1..." will appear only when pageNow is at least greater than 2
160
161 //Homepage
162 $this->pageShow .= "$this-> ;url."p=1">".$this->firstFonts."";
163
164 //Previous page
165 $this->pageShow .= "$this-> ;url."p=".($this->pageNow-1)."">".($preFonts == ""?$this ->preFonts:$preFonts)."";
166
167 for($i=$this->prePage;$i>=1; $i--){
168
169 //The page number between the current page and '...' is not displayed in ajax mode
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 /*************************Page number and back offset processing**** *************************/
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){ //When the total number of pages is greater than the back offset
187
188 for($i=0;$i<=$this->floPage; $i++){
189
190 $page = $this->pageNow+$i;
191
192 if($page<=$this->totalPage){
193
194 //Page number, ajax mode does not display
195 //if($this->page_act != 1){
196
197 $this->pageShow .= "$this->url." p=".$page."">".$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).""; //When the text passed by the user when instantiating the object is empty, then Call the class's default "next page", otherwise output the value passed by the user
205
206 if(($this->pageNow+$this->floPage+1)<$this ->totalPage){
207
208 $this->pageShow .= "$this-> ;url."p=".
$this->totalPage."">Last page"
;
209 }
210
211 }
else if(
$this->pageNow >
$this->
totalPage){
212
213 die("Out of page range"
);
214 }
215 }
else{
//When the total number of pages is less than the back offset
216
217 if(
$this->pageNow <
$this->totalPage){
//When the current page is less than the total number of pages
218
219 for(
$i=0;
$i<
$this->totalPage;
$i++
){
220
221 $page =
$this->pageNow+
$i;
222
223 if(
$page <
$this->
totalPage){
224
225 //if($this->page_act != 1){
226
227 //Border after page number
228 $this->pageShow .= "
$this->url." p=".$page."">".$page.""
;
229 //}
230
231 }
else if(
$page ==
$this->
totalPage){
232
233 //if($this->page_act != 1){
234
235 $this->pageShow .= "
$this->url."p=".$page."">".$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 return $this->
pageShow;
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 //检测content是否为数组
283 if(
is_array(
$this->check())){
//content含分页符才分页
284
285 //总页数
286 return $this->totalPage =
count(
$this->
check());
287 }
else{
288
289 return $this->totalPage = 1
;
290 }291 }
292
293 /************************************* Pagination*******************************************/
294 public function page(){
295
296 //Articles generally don’t have many paginations, so I just use style2 in list_page.class.php as the paging style.
297 //Return to page number
298 return $this->preOffset(
$preFonts,
$this->prePage).
$this->floOffset(
$nextFonts,
$this->floPage).
$this->
getOtherInfo();
299 }
300 }
View Code
This file contains a method to detect whether page breaks are included. If page breaks are included, the incoming content will be split according to page breaks and an array will be returned. Otherwise, a string will be returned.
templates/js/ajax_arc.js
![PHP+jQuery long article paging class (supports url / ajax paging method), _PHP tutorial]()
1 $(
function(){
2
3 //Initially display "next page", "last page"
4 showFloPage();
5
6 //Delete the original li and insert gif
7 function ajaxpre(){
8
9 //Insert gif image
10 $loading = $("
![]()
"
);
11
12 $("#content"
).html($loading);
13 }
14
15 //Hide page turning information
16 function infoAct(){
17
18 //When the current page reaches the last page, "next page" and "last page"
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){
// Hide "Home" and "Previous Page" when the current page arrives
28
29 $("#pre_page"
).hide();
30 $("#first_page"
).hide();
31
32 $("#flo_page"
).show();
33 $("#last_page"
).show();
34
35 }
else{
36
37 $("#pre_page"
).show();
38 $("#first_page"
).show();
39
40 $("#flo_page"
).show();
41 $("#last_page"
).show();
42 }
43 }
44
45 //When you click "Next Page" and "Last Page", "Home" and "Previous Page" will appear
46 function showPage(){
47
48 //Home
49 $firstPage = $("
Homepage"
);
50
51 if($("#first_page").length == 0
){
52 $firstPage.insertBefore($(".ajaxpage:first"
));
53 }
54
55 //Previous page
56 $pre_page = $("
"+$preFonts+""
);
57
58 if($("#pre_page").length == 0
){
59 $pre_page.insertBefore($(".ajaxpage:first"
));
60 }
61 }
62
63 //When you click "Previous Page" and "Home Page", "Next Page" and "Last Page" will appear
64 function showFloPage(){
65
66 //Next page
67 $flo_page = $("
"+$preFonts+""
);
68
69 if($("#flo_page").length == 0
){
70 $flo_page.insertAfter($(".ajaxpage:last"
));
71 }
72
73 //Last page
74 $lastPage = $("
last page"
);
75
76 if($("#last_page").length == 0
){
77 $lastPage.insertAfter($("#flo_page"
));
78 }
79 } 80
81 //ajax request data
82 function ajaxpost(){
83
84 $.post("ajaxarc.php"
,{
85
86 pageNow : parseInt($("#pageNow"
).val()),
87 id : parseInt($("#id"
).val()),
88 pagebreak : $("#pagebreak"
).val()
89 },
function(data,textStatus){
90
91 //Delete gif
92 $(".loading"
).remove();
93
94 $("#content"
).html(data);
95 });
96 }
97
98
99 //Initial value=1
100 apagenow = parseInt($("#pageNow"
).val());
101
102 //ajax "Homepage" Because "Homepage" and "Previous Page" do not appear at the beginning, they only appear after "Next Page" and "End Page" Call the "Home" and "Previous Page" functions in the click function of "Page"
103 function firstPageAct(){
104
105 if($("#first_page").is(":visible"
)){
106
107 $("#first_page").live('click',
function(){
108
109 //Delete the before update
110 ajaxpre();
111
112 //pageNow is set to 1
113 $("#pageNow").val(1
);
114 apagenow = parseInt($("#pageNow"
).val());
115
116 //Modify page number information
117 $("#pagenow_info").html(" Current page 1"
);
118
119 //Post offset pagination
120 flopage($("#pageNow"
).val());
121
122 //ajax request data
123 ajaxpost();
124
125 //Hide "Home" and "Previous Page" after reaching "Home"
126 infoAct();
127
128 //Add style to page number
129 selpage();
130 });
131 }
132 }
133
134 function lastPageAct(){
135
136 if($("#last_page").is(":visible"
)){
137
138 $("#last_page").live('click',
function(){
139
140 //Delete the before update
141 ajaxpre();
142
143 //pageNow is set to 1
144 $("#pageNow").val($("#totalPage"
).val());
145 apagenow = parseInt($("#pageNow"
).val());
146
147 //Modify page number information
148 $("#pagenow_info").html(" The current page "+apagenow+""
);
149
150 //Post offset pagination
151 flopage($("#pageNow"
).val());
152
153 if($("#first_page").is(":hidden") || $("#first_page").length == 0
){
154
155 //"Home" and "Next Page" appear
156 showPage();
157 showFloPage();
158 firstPageAct();
159 lastPageAct();
160 prePageAct();
161 }162
163 //ajax request data
164 ajaxpost();
165
166 //Hide "Home" and "Previous Page" after reaching "Home"
167 infoAct();
168
169 //Add style to page number
170 selpage();
171 });
172 }
173 }
174
175 //ajax "Previous page"
176 function prePageAct(){
177
178 if($("#pre_page").is(":visible"
)){
179
180 $("#pre_page").click(
function(){
181
182 //Delete the before update
183 ajaxpre();
184
185 //Every time you click "Previous Page", the hidden field value is -1
186 if(parseInt(apagenow) != 1
){
187
188 apagenow = parseInt(apagenow) - parseInt(1
);
189 }
190
191 $("#pageNow"
).val(apagenow);
192
193 //Front and back offset paging
194 flopage($("#pageNow"
).val());
195
196 //When the page number value of the hidden field is greater than 1
197 if(parseInt($("#pageNow").val()) > parseInt(1
)){
198
199 //Modify page number information
200 $("#pagenow_info").html(" The current page "+$("#pageNow").val()+"page"
);
201 }
202
203 //ajax request data
204 ajaxpost();
205
206 if($("#first_page").is(":hidden") || $("#first_page").length == 0
){
207
208 //"Home" and "Next Page" appear
209 showPage();
210 showFloPage();
211 firstPageAct();
212 lastPageAct();
213 prePageAct();
214 }
215
216 //Hide "Home" and "Previous Page" on the first page
217 infoAct();
218
219 //Add style to page number
220 selpage();
221 });
222
223 }
224 }225
226 //ajax "Next page"
227 if($("#flo_page").length>0
){
228
229 //Remove the href attribute of a
230 $("#flo_page").removeAttr("href"
);
231
232 $("#flo_page").live('click',
function(){
233
234 ajaxpre();
235
236 //Every time you click "Next", the hidden field value +1
237 apagenow = parseInt(apagenow) + parseInt(1
);
238
239 $("#pageNow"
).val(apagenow);
240
241 //Post offset paging
242 flopage($("#pageNow"
).val());
243
244 //When the page number value of the hidden field is less than the total page number
245 if(parseInt($("#pageNow").val()) <= parseInt($("#totalPage"
).val())) {
246
247 //Modify page number information
248 $("#pagenow_info").html(" The current page "+$("#pageNow").val()+"page"
);
249
250 //ajax request data
251 ajaxpost();
252 }
253
254 //After clicking "Next Page", the "Home Page" will appear
255 if($("#first_page").is(":hidden") || $("#first_page").length == 0
){
256
257 //"Home" and "Next Page" appear
258 showPage();
259 showFloPage();
260 firstPageAct();
261 lastPageAct();
262 prePageAct();
263 }
264
265 //Hide "next page" and "last page"
266 infoAct();
267
268 //Add style to page number
269 selpage();
270
271 return false;
//Cancel click to turn page
272 });
273 }
274
275 //ajax "last page"
276 if($("#last_page").length>0
){
277
278 //Remove the href attribute of a
279 $("#last_page").removeAttr("href"
);
280
281 $("#last_page").live('click',
function(){
282
283 ajaxpre();
284
285 //Modify the current page information of the hidden domain
286 apagenow = parseInt($("#totalPage"
).val());
287 $("#pageNow"
).val(apagenow);
288
289 //Modify page number information
290 $("#pagenow_info").html(" The current page "+$("#totalPage").val()+""
);
291
292 //Post offset paging
293 flopage($("#pageNow"
).val());
294
295 //ajax request data
296 ajaxpost();
297
298 //After clicking "Last Page", "Home Page" will appear
299
300 if($("#first_page").length == 0
){
301
302 showPage();
303 showFloPage();
304 firstPageAct();
305 lastPageAct();
306 prePageAct();
307 }308
309 infoAct();
310
311 //Add style to page number
312 selpage();
313
314 return false;
315 });
316 }
317
318 //Cancel a tag jump
319 $("#first_page").live('click',
function(){
320
321 return false;
322 });
323
324 $("#pre_page").live('click',
function(){
325
326 return false;
327 });
328
329 //Delete the href of the specific page number
330 $(".ajaxpage").removeAttr("href"
);
331
332
333 //live() allows elements dynamically added by jQuery to also be bound to event handlers
334 $(".ajaxpage").live('click',
function(){
335
336 ajaxpre();
337
338 //Every time you click "Next", the hidden field value changes to the page number displayed by the current a tag
339 apagenow = $(
this).text();
340
341 $("#pageNow"
).val(apagenow);
342
343 //Post offset paging
344 flopage($("#pageNow"
).val());
345
346 //Modify page number information
347 $("#pagenow_info").html(" The current page "+$("#pageNow").val()+"page"
);
348
349 $(".ajaxpage").removeClass("selected"
);
350
351 $(
this).each(
function(){
352
353 if($(
this).text() == $("#pageNow"
).val()){
354
355 $(
this).addClass("selected"
);
356 }
357 })
358
359 if($("#first_page").is(":hidden") || $("#first_page").length == 0
){
360
361 //"Home" and "Next Page" appear
362 showPage();
363 showFloPage();
364 firstPageAct();
365 lastPageAct();
366 prePageAct();
367 }
368
369 infoAct();
370
371 //Add style to page number
372 selpage();
373
374 ajaxpost();
375 });
376
377 //"Previous page", "Next page" add style to the page number
378 function selpage(){
379
380 //Add style to page number
381 $(".ajaxpage").removeClass("selected"
);
382 $(".ajaxpage").each(
function(){
383
384 if($(
this).text() == $("#pageNow"
).val()){
385
386 $(
this).addClass("selected"
);
387 }
388 })
389
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
