javaweb分頁技術實現
分頁技術就是通過sql語句(如下)來獲取數據，具體實現看下面代碼
|
1
2
3
4
5
|
//分頁查詢語句select * from 表名 where limit page , count;和//獲取表中的總數據，確定頁數select count(*) from 表名; |
不說廢話直接上代碼
前端代碼：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
|
<!doctype html><html><head> <meta charset="utf-8"> <title>title</title> <script src="js/jquery-3.3.1.js"></script> <link rel="stylesheet" href="css/bootstrap.min.css" rel="external nofollow" ></head><body> <div> <div class="row clearfix"> <div class="col-md-12 column"> <table class="table table-bordered table-hover"> <thead> <tr> <th>city_id</th> <th>city_en</th> <th>city_cn</th> <th>country_code</th> <th>country_en</th> <th>country_cn</th> <th>province_en</th> <th>province_cn</th> </tr> </thead> <tbody id="tbody"> </tbody> </table> <!--分頁--> 第<span id="paging">1</span>頁/ 共<span id="countpage">1</span>頁/ <a id="homepage">home</a>/ <a id="prevpage">prev</a>/ <a id="nextpage">next</a>/ 轉到第： <input type="text" style="width: 2em" id="pagenum"> 頁 <a id="gopage">go</a> </div> </div></div></body><script> $(function () { //頁面初始化 （顯示第一頁） selectpage(1); home(); prev(); next(); gopage(); }) function selectpage(pagecode) { //分頁查詢 pagecode：頁數 $.ajax("getcity",{ type:"get", data:{"currenpage":pagecode}, success:function (data) { $("#tbody").html(""); //總頁數 $("#countpage").text(data.totalpage); $.each(data.pagedata,function (index,obj) { var clazz=""; if(index%2==0){ clazz="success"; } $("#tbody").append( "<tr class='"+clazz+"'>\n" + "<td>"+obj.cityid+"</td>\n" + "<td>"+obj.cityen+"</td>\n" + "<td>"+obj.citycn+"</td>\n" + "<td>"+obj.countrycode+"</td>\n" + "<td>"+obj.countryen+"</td>\n" + "<td>"+obj.countrycn+"</td>\n" + "<td>"+obj.provinceen+"</td>\n" + "<td>"+obj.provincecn+"</td>\n" + "</tr>" ); }) } }); } //第一頁 function home() { $("#homepage").on("click",function () { $("#paging").text(1); selectpage(1); }) } //上一頁 function prev() { $("#prevpage").on("click",function () { var prevtext=$("#paging").text(); var prevnum=parseint(prevtext); prevnum=prevnum-1; if(prevnum<=1){ selectpage(1); $("#paging").text(1); return; } $("#paging").text(prevnum); selectpage(prevnum); }) } //下一頁 function next() { $("#nextpage").on("click",function () { //獲取文本的值 頁數 var prevtext=$("#paging").text(); //類型轉換 var prevnum=parseint(prevtext); //總頁數 var counttext=$("#countpage").text(); //類型轉換 var countnum = parseint(counttext); //頁數加1 prevnum=prevnum+1; //判斷超出了總頁碼 if(prevnum>=countnum){ selectpage(countnum); $("#paging").text(countnum); return; } //設置網頁增加的值 $("#paging").text(prevnum); //調用分頁查詢 selectpage(prevnum); }) } //去到幾頁 function gopage() { $("#gopage").on("click",function () { var pagenum=parseint($("#pagenum").val()); var countpage=parseint($("#countpage").text()) //判斷超出了總頁碼 if(pagenum>=countpage){ selectpage(countpage); $("#paging").text(countpage); $("#pagenum").val(countpage); return; } //判斷低于了總頁碼 if(pagenum<=1){ selectpage(1); $("#paging").text(1); $("#pagenum").val(1); return; } selectpage(pagenum); $("#paging").text(pagenum); }) } </script></html> |
后臺servlet代碼：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
/** * @author hh * @date 2018/9/12 */@webservlet("/getcity")public class pageservlet extends httpservlet { @override protected void service(httpservletrequest req, httpservletresponse resp) throws servletexception, ioexception { //獲取當前頁參數，第一次訪問為空 string currpage = req.getparameter("currenpage"); // 判斷，如果為空，則設置為1 if (currpage == null || "".equals(currpage.trim())) { currpage = "1"; } //調用service返回分頁類實例 pagebean<city> pagebean=new pageservice().getpage(currpage); //設置相應文本類型 resp.setcontenttype("application/json;charset=utf-8"); //響應前端 resp.getwriter().print(new gson().tojson(pagebean)); }} |
city 實體類：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
|
package edu.nf.demo.entity; /** * @author hh * @date 2018/9/12 */public class city { private string cityid; private string cityen; private string citycn; private string countrycode; private string countryen; private string countrycn; private string provinceen; private string provincecn; public string getcityid() { return cityid; } public void setcityid(string cityid) { this.cityid = cityid; } public string getcityen() { return cityen; } public void setcityen(string cityen) { this.cityen = cityen; } public string getcitycn() { return citycn; } public void setcitycn(string citycn) { this.citycn = citycn; } public string getcountrycode() { return countrycode; } public void setcountrycode(string countrycode) { this.countrycode = countrycode; } public string getcountryen() { return countryen; } public void setcountryen(string countryen) { this.countryen = countryen; } public string getcountrycn() { return countrycn; } public void setcountrycn(string countrycn) { this.countrycn = countrycn; } public string getprovinceen() { return provinceen; } public void setprovinceen(string provinceen) { this.provinceen = provinceen; } public string getprovincecn() { return provincecn; } public void setprovincecn(string provincecn) { this.provincecn = provincecn; }} |
自己寫的一個類，專門用于分頁查詢用的：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
|
package edu.nf.demo.entity; import java.util.list; /** * @author hh * @date 2018/9/12 */public class pagebean<t> { /** * 當前頁， 默認顯示第一頁 */ private integer currntpage = 1; /** * 查詢返回的行數（每頁顯示的行數），默認每頁顯示10行 */ private int pagecount = 10; /** * 總記錄數 */ private int totalcount; /** * 總頁數 = 總記錄數/每頁顯示的行數（+1） */ private int totalpage; /** * 分頁查詢的數據,運用泛型，可以重復利用 */ private list<t> pagedata; public int gettotalpage() { if (totalcount % pagecount == 0) { totalpage = totalcount / pagecount; } else { totalpage = totalcount / pagecount + 1; } return totalpage; } public void settotalpage(int totalpage) { this.totalpage = totalpage; } public int getcurrntpage() { return currntpage; } public void setcurrntpage(int currntpage) { this.currntpage = currntpage; } public int getpagecount() { return pagecount; } public void setpagecount(int pagecount) { this.pagecount = pagecount; } public int gettotalcount() { return totalcount; } public void settotalcount(int totalcount) { this.totalcount = totalcount; } public list<t> getpagedata() { return pagedata; } public void setpagedata(list<t> pagedata) { this.pagedata = pagedata; }} |
后臺service，邏輯業務層：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
/** * @author hh * @date 2018/9/12 */public class pageservice { public pagebean getpage(string currpage){ //類型轉換 當前頁數 integer currenpage = integer.valueof(currpage); //實例化分頁類 pagebean<city> pagebean = new pagebean(); //實例化citydaoimpl類 citydaoimpl citydao=new citydaoimpl(); //數據庫第幾行開始查詢 int startpage=(currenpage-1)*pagebean.getpagecount(); //查詢多少行數據 分頁類里默認30行 int selectcount=pagebean.getpagecount(); //查詢數據庫獲取分頁返回的數據 : select * from regional_info limit startpage,selectcount list<city> list=citydao.listcity(startpage,selectcount); //獲取總數 int citycount=citydao.getcitycount(); //設置查詢的數據 pagebean.setpagedata(list); //共多少行 pagebean.settotalcount(citycount); //設置總頁數 pagebean.settotalpage(citycount/pagebean.getpagecount()+1); return pagebean; }} |
