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; } } |
查看更多关于java web实现分页查询实例方法的详细内容...