开发环境:
第一步:代码实现之前期准备
在idea中开发前期配置的工作,网上的帖子很多,我 在这里就不再赘述.主要说三点
在服务器的配置中,红色框框的两项要选择update classes and resource ,选择了之后可以实现热部署.
要在此处填写项目的名称.作为项目的根路径
导入jar包的方式如图所示,在dependencie中点击加号,选中自己创建好的lib文件夹
导入相关的jar包: c3p0的jar包、dbutils工具类jar包、fastjson的jar包、mysql驱动jar包
在数据库test03的product表中写入如下的数据
在idea中为工程分包,以及导入c3p0连接池的配置
注意,c3p0配置文件,要修改成自己的数据库名称,以及数据库密码
在domain包中,创建product实体类,根据数据库中product表的字段,在product类中,书写对应的属性.生成get set方法.
创建获取连接池对象的工具类
第二步:无分页查询所有的商品信息
实现思路:
jsp/html----->servlet(web层处理请求与响应的数据) -----------> service(service层处理逻辑)----------->dao(dao层处理数据库操作)
创建产品页面，向服务器发送请求（获取所有产品信息）
前端使用了bootstrap响应式开发,可以让页面更加美观,开发更加便捷
页面信息的代码如下:
|
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
|
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>商品展示列表</title> <!--引入bootstrap相关文件--> <link rel="stylesheet" href="/ajax_product/bootstrap/css/bootstrap.css" rel="external nofollow" rel="external nofollow" > <script type="text/javascript" src="/ajax_product/bootstrap/js/jquery-1.11.3.js"></script> <script type="text/javascript" src="/ajax_product/bootstrap/js/bootstrap.js"></script></head><script type="text/javascript"> //页面加载时,向服务器发送请求,接收全部的商品数据 $(function () { //===================未分页,展示所有数据=============================== var url ="/ajax_product/product"; //=====向服务器发送post请求 $.post(url,function (data) { //解析服务器端传过来的全部数据 //============================向表格中展示商品信息 var products = eval(data); //遍历数据 for (var i = 0; i < products.length; i++) { //遍历每一行的数据 var protd =$("<tr><td>"+products[i].id+"</td><td>"+products[i].name+"</td><td>"+products[i].count+"</td><td>"+products[i].price+"</td></tr>"); // 并添加到表格中,添加数据到表格中 $("#tab").append(protd); } },"json") })</script><body><h3 align="center">促销商品展示</h3><div class="container"> <!--商品的表格占一行--> <div class="row"> <div class="col-md-12"> <!--table-hover表示当鼠标移入这一行表格的时候,颜色变化 table-bordered表示给表格加边框 --> <table class="table table-hover table-bordered" id="tab"> <tr> <th>编号</th> <th>商品名称</th> <th>商品数量</th> <th>商品单价</th> </tr> </table> </div> </div></div></body></html> |
创建一个servlet来接收请求，获取所有的产品信息
在idea中,创建servlet如下图所示
在这里不勾选自动生成注解
点击ok之后,idea会自动跳转到web.xml文件中,自动写好了servlet的全路径名,只需写url-pattern即可
注意url-pattern需要写得与ajax请求中的servlet一致.
web层servlet的代码如下:
|
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
|
package com.thc.web;import com.alibaba.fastjson.jsonobject;import com.thc.service.productservice;import javax.servlet.servletexception;import javax.servlet.http.httpservlet;import javax.servlet.http.httpservletrequest;import javax.servlet.http.httpservletresponse;import java.io.ioexception;import java.sql.sqlexception;import java.util.list;public class product extends httpservlet { protected void dopost(httpservletrequest request, httpservletresponse response) throws servletexception, ioexception { //处理响应与请求的乱码 request.setcharacterencoding("utf-8"); response.setcontenttype("text/html;charset=utf-8"); //由于是显示所有的产品信息,没有参数接收 //需要调用服务层查找所有数据的方法,获取结果,响应给客户端 productservice service = new productservice(); try { //调用业务层的方法,获取所有的商品 list<com.thc.domain.product> allprouct = service.findallprouct(); //把得到的数据,转为json类型的数据 string jsonstring = jsonobject.tojsonstring(allprouct); //回写给浏览器 response.getwriter().write(jsonstring); } catch (sqlexception e) { e.printstacktrace(); } } protected void doget(httpservletrequest request, httpservletresponse response) throws servletexception, ioexception { dopost(request,response); }} |
在service层，从dao层获取数据，返回给web层的servlet
web层调用service层的代码如下
|
1
|
|
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
package com.thc.service;import com.thc.dao.productdao;import com.thc.domain.product;import java.sql.sqlexception;import java.util.list;public class productservice { //在service层,从dao层获取数据,返回数据给web层 public list<product> findallprouct() throws sqlexception { productdao dao = new productdao(); //调用dao层查询所有的商品 list<product> allproduct = dao.findallproduct(); return allproduct; }} |
在dao层从服务器中查询数据,给service层
|
1
|
|
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
package com.thc.dao;import com.thc.domain.product;import com.thc.utils.jdbcutils;import org.apache.commons.dbutils.queryrunner;import org.apache.commons.dbutils.handlers.beanlisthandler;import java.sql.sqlexception;import java.util.list;//=================dao层专门负责数据库操作public class productdao { //===========查询所有商品信息 public list<product> findallproduct() throws sqlexception { //利用dbutils,创建queryrunner核心对象 queryrunner qr = new queryrunner(jdbcutils.getdatasource()); //书写sql语句,查询所有的商品 string sql = "select * from product"; //把商品到的商品,转为list集合,泛型为product list<product> products = qr.query(sql, new beanlisthandler<>(product.class)); return products; }} |
dao层拿到数据后,传递给service层,service层再传递给web层的servlet,servlet拿到数据后,是保存在list集合中的,再把list集合转为json数据类型,写给浏览器.前端页面中的如下代码,就是在解析servlet返回的json数据
|
1
|
|
2
3
4
5
6
7
8
9
10
11
12
|
$.post(url,function (data) { //解析服务器端传过来的全部数据 //============================向表格中展示商品信息 var products = eval(data); //遍历数据 for (var i = 0; i < products.length; i++) { //遍历每一行的数据 var protd =$("<tr><td>"+products[i].id+"</td><td>"+products[i].name+"</td><td>"+products[i].count+"</td><td>"+products[i].price+"</td></tr>"); // 并添加到表格中,添加数据到表格中 $("#tab").append(protd); } },"json") |
通过谷歌浏览器自带的抓包工具,可以看到servlet响应的数据
把响应的数据全部复制下来,就是如下的数据.一个数组中嵌套了产品的对象.
对象中都是以键值对的形式存在的.
例如第一个数据中,键为count,值为100. 键为id,值为1,键为name,值为电视机,键为price 值为2000
|
1
|
|
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
[ {"count":100,"id":1,"name":"电视机","price":2000}, {"count":200,"id":2,"name":"洗衣机","price":1000}, {"count":300,"id":3,"name":"空调","price":3000}, {"count":50,"id":4,"name":"投影仪","price":2000}, {"count":1000,"id":5,"name":"hp电脑","price":4000}, {"count":100,"id":6,"name":"苹果手机","price":5000}, {"count":60,"id":7,"name":"缝纫机","price":2000}, {"count":100,"id":8,"name":"小米盒子","price":2200}, {"count":300,"id":9,"name":"饮水机","price":2000}, {"count":200,"id":10,"name":"净水器","price":2000}, {"count":500,"id":11,"name":"电暖器","price":2000}, {"count":100,"id":12,"name":"榨汁机","price":399}, {"count":200,"id":13,"name":"电压力锅","price":498}, {"count":300,"id":14,"name":"电饭煲","price":299}, {"count":50,"id":15,"name":"微波炉","price":1299}, {"count":200,"id":16,"name":"豆浆机","price":199}, {"count":300,"id":17,"name":"电磁炉","price":398}, {"count":500,"id":18,"name":"加湿器","price":99}, {"count":250,"id":19,"name":"剃须刀","price":98}, {"count":1000,"id":20,"name":"舒肤佳","price":16.5}, {"count":1200,"id":21,"name":"雕牌","price":8.8}, {"count":1500,"id":22,"name":"立白","price":9.9}] |
不分页的情况下,展示的效果如下:
一个页面中,把所有的数据都展示出来了,如果数据非常多,例如上百度搜索一个关键词,结果可能有上万上亿条,一次性从数据库中,拿这么多的结果给浏览器,是很长的时间的,用户体验极差,因此需要分页技术.采用物理分页,
一次只从数据库中查询当前页面需要的信息.
第三步:传递当前页面数和每页显示的数量给服务器
html页面中需要增加当前页面数和每页显示的数量这两个变量,传递给服务器
更改代码的如下图所示:
在servlet层需要接收参数,并且从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
|
public class product extends httpservlet { protected void dopost(httpservletrequest request, httpservletresponse response) throws servletexception, ioexception { //处理响应与请求的乱码 request.setcharacterencoding("utf-8"); response.setcontenttype("text/html;charset=utf-8"); //当前页面 int pageno = integer.parseint(request.getparameter("pageno")); //每页的显示条数 int pagesize = integer.parseint(request.getparameter("pagesize")); //由于是显示所有的产品信息,没有参数接收 //需要调用服务层查找所有数据的方法,获取结果,响应给客户端 productservice service = new productservice(); try { //根据当前页和每页显示的数目,来从service层,获取数据 list<com.thc.domain.product> product = service.findproduct(pageno, pagesize); string jsonstring = jsonobject.tojsonstring(product); //回写给浏览器 response.getwriter().write(jsonstring); } catch (sqlexception e) { e.printstacktrace(); } } protected void doget(httpservletrequest request, httpservletresponse response) throws servletexception, ioexception { dopost(request,response); }} |
service层新增的查找当前页面数据方法
|
1
|
|
2
3
4
5
|
public list<product> findproduct(int pageno, int pagesize) throws sqlexception { productdao dao = new productdao(); list<product> product = dao.findproduct(pageno, pagesize); return product; } |
dao层新增的从数据库查找当前页面的方法
|
1
|
|
2
3
4
5
6
7
8
9
|
public list<product> findproduct(int pageno, int pagesize) throws sqlexception { queryrunner qr = new queryrunner(jdbcutils.getdatasource()); string sql ="select * from product limit ?,?"; //limit第一个参数:从数据库中的哪里开始查,索引是从0开始的 //第二个参数:每次查多少个 //第一个参数的规律是:当前页数减一,乘以每页查询的个数 list<product> productlist = qr.query(sql, new beanlisthandler<>(product.class), (pageno - 1) * pagesize, pagesize); return productlist; } |
浏览器端显示如下图所示:每次只会显示pagesize(当前的值为6)个数的商品信息.
但是还不能动态的通过点击页面按钮来实现翻页.
那么就要考虑页面如何显示分页条以及数据该如何封装？
我们知道页面的分页条 显示 的页数是动态变化的 ，总页数 =数据的总条数/每页显示的数据，要向上取整。也就是说，我们的页面除了需要list<product>数据之外，还需要数据的总条数、总页数、当前页、每页显示数量。另外当前页pageno也是动态变化的，在页面上点击多少页，pageno就是几。所以， 我们需要再创建一个javabean（pagebean.java）来封装这些数据 ，在服务端得到这些数据之后转成json数据发送给客户端显示。
第四步:将页面的相关数据封装为一个javabean
在domain包内创建一个类,名为pagebean,属性如下:
|
1
|
|
2
3
4
5
|
private int pageno;//当前页数private int pagesize;//每页显示的数量private int totalcount;//一共有多少个商品信息数据private int totalpage;//一共有多少页数据private list<product> products;//商品信息数据的集合 |
在web层传递service层当前页面数(pageno),和每页显示的条数(pagesize),返回给web层一个pagebean
web层的最终代码如下
|
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
|
public class product extends httpservlet { protected void dopost(httpservletrequest request, httpservletresponse response) throws servletexception, ioexception { //处理响应与请求的乱码 request.setcharacterencoding("utf-8"); response.setcontenttype("text/html;charset=utf-8"); //当前页面 int pageno = integer.parseint(request.getparameter("pageno")); //每页的显示条数 int pagesize = integer.parseint(request.getparameter("pagesize")); //由于是显示所有的产品信息,没有参数接收 //需要调用服务层查找所有数据的方法,获取结果,响应给客户端 productservice service = new productservice(); try { /* 调用业务层的方法,获取所有的商品 list<com.thc.domain.product> allprouct = service.findallprouct(); 把得到的数据,转为json类型的数据 string jsonstring = jsonobject.tojsonstring(allprouct);*/ //根据当前页和每页显示的数目,来从service层,获取数据 //list<com.thc.domain.product> product = service.findproduct(pageno, pagesize); //===============从web层拿到pagebean的数据================================= pagebean pagebean = service.findpageinfo(pageno, pagesize); //===============把数据转为json=============================== string jsonstring = jsonobject.tojsonstring(pagebean); //================回写给浏览器==================== response.getwriter().write(jsonstring); } catch (sqlexception e) { e.printstacktrace(); } } protected void doget(httpservletrequest request, httpservletresponse response) throws servletexception, ioexception { dopost(request,response); }} |
在service需要获取pagebean的全部信息,pageno和pagesize是已知的.需要从dao层获取商品的信息数据,list集合,还需要获取总的商品信息数据totalcount.总共有多少页可以通过总数据除以每页显示的数据,并向上取整.
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
32
33
34
35
36
37
38
|
public class productservice { //在service层,从dao层获取数据,返回数据给web层 //=========service层处理所有商品信息的数据给web层==================== public list<product> findallprouct() throws sqlexception { productdao dao = new productdao(); //调用dao层查询所有的商品 list<product> allproduct = dao.findallproduct(); return allproduct; } //============service层查询某个特定页面的数据给web层================================= public list<product> findproduct(int pageno, int pagesize) throws sqlexception { productdao dao = new productdao(); list<product> product = dao.findproduct(pageno, pagesize); return product; } //============service层封装pagebean数据=================================== public pagebean findpageinfo(int pageno, int pagesize) throws sqlexception { productdao dao = new productdao(); list<product> product = dao.findproduct(pageno, pagesize); int totalcount = dao.findtotalcount(); pagebean pb = new pagebean(); //封装数据 pb.settotalcount(totalcount); pb.setpageno(pageno); pb.setpagesize(pagesize); pb.setproducts(product); //向上取整,计算总页数,不要忘了乘以1.0,否则会少一页数据 int totalpage = (int) math.ceil(totalcount*1.0/pagesize); pb.settotalpage(totalpage); //把数据给servlet return pb; }} |
在dao层,新增了一个方法,用于查询数据库总信息的总个数
dao层最终的代码如下
|
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
|
//=================dao层专门负责数据库操作public class productdao { //===========查询所有商品信息 public list<product> findallproduct() throws sqlexception { //利用dbutils,创建queryrunner核心对象 queryrunner qr = new queryrunner(jdbcutils.getdatasource()); //书写sql语句,查询所有的商品 string sql = "select * from product"; //把商品到的商品,转为list集合,泛型为product list<product> products = qr.query(sql, new beanlisthandler<>(product.class)); return products; }//=======================查询当前页的产品信息===================== public list<product> findproduct(int pageno, int pagesize) throws sqlexception { queryrunner qr = new queryrunner(jdbcutils.getdatasource()); string sql ="select * from product limit ?,?"; //limit第一个参数:从数据库中的哪里开始查,索引是从0开始的 //第二个参数:每次查多少个 //第一个参数的规律是:当前页数减一,乘以每页查询的个数 list<product> productlist = qr.query(sql, new beanlisthandler<>(product.class), (pageno - 1) * pagesize, pagesize); return productlist; }//===============查询总共有多少条数据================= public int findtotalcount() throws sqlexception { queryrunner qr = new queryrunner(jdbcutils.getdatasource()); string sql = "select count(*) from product"; long countl =(long) qr.query(sql, new scalarhandler()); return countl.intvalue(); }} |
第五步:处理前端页面
在table标签的下面,增加一行,提供分页的组件.并把li代码注释掉,因为需要动态展示.
先声明需要接收的参数变量
|
1
|
|
2
3
4
5
|
var url ="/ajax_product/product";var pageno=1;//当前页面设置为1var pagesize=6;//每页显示6条商品信息var totalpage;//一共有多少页数据var products;//商品的数据信息 |
写好了ajax的post请求之后,抓包测试浏览器是否接收到数据
|
1
|
|
2
3
4
|
$.post( url,//给服务器传送数据的地址 {"pageno": pageno, "pagesize": pagesize},//给浏览器传递当前页面数和每页显示的条数 function (data) {}) |
在抓包拿到了如下 的数据
|
1
|
|
2
3
4
5
6
7
8
9
10
|
{"pageno":1, "pagesize":6, "products":[{"count":100,"id":1,"name":"电视机","price":2000}, {"count":200,"id":2,"name":"洗衣机","price":1000}, {"count":300,"id":3,"name":"空调","price":3000}, {"count":50,"id":4,"name":"投影仪","price":2000}, {"count":1000,"id":5,"name":"hp电脑","price":4000}, {"count":100,"id":6,"name":"苹果手机","price":5000}], "totalcount":22, "totalpage":3} |
说明服务器端能够正常给浏览器响应数据.再接着写前端代码
显示表格中的数据
先将后端得到的数据解析,再同步到js代码中,通过pagebean.products获得所有product对象的数据的数组,再遍历这个数组,把product属性的值拼接到表格中去.
代码如下
|
1
|
|
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
$.post( url,//给服务器传送数据的地址 {"pageno": pageno, "pagesize": pagesize},//给浏览器传递当前页面数和每页显示的条数 function (data) { //解析服务器端传过来的全部pagebean数据,格式为json类型 var pagebean = eval(data); //同步数据 pageno=pagebean.pageno; pagesize=pagebean.pagesize; totalpage=pagebean.totalpage; products=pagebean.products; //显示表格中的数据=============================================== for (var i = 0; i < products.length; i++) { //遍历每一行的数据 var protd =$("<tr><td>"+products[i].id+"</td><td>"+products[i].name+"</td> <td>"+products[i].count+"</td><td>"+products[i].price+"</td> </tr>"); // 并添加到表格中,添加数据到表格中 $("#tab").append(protd); } },"json") |
这段代码写完后,可开启服务器,测试能否获取数据到表格中.经测试成功显示数据.
显示分页条的数据
先显示上一页与下一页的数据
|
1
|
|
2
3
4
5
6
7
8
9
10
11
|
//显示分页条的数据//先不考虑功能,先能显示出来//显示上一页var preli=$('<li class="disabled"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >上一页</a></li>');//通过类选择器,添加进去$(".pager").append(preli);//显示下一页var nextli=$('<li class="disabled"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >下一页</a></li>');//通过类选择器,添加进去$(".pager").append(nextli); |
进测试效果如下:
显示页码数据:
|
1
|
|
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
//显示分页条的数据//先不考虑功能,先能显示出来//显示上一页var preli=$('<li class="disabled"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >上一页</a></li>');//通过类选择器,添加进去$(".pager").append(preli);//遍历显示页码for (var i = 1; i <= totalpage; i++) { //创建li标签 var li=$('<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >'+i+'</a></li>'); //通过类选择器,添加到ul中 $(".pager").append(li);}//显示下一页var nextli=$('<li class="disabled"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >下一页</a></li>');//通过类选择器,添加进去$(".pager").append(nextli); |
效果如下图所示:
当前页高亮显示
由于bootstrap中,pager类不支持高亮显示,因此把分页的类换为pagination.
高亮的逻辑是,在遍历的是否,判断是否为当前页(pageno).
给li标签添加class的active 属性
|
1
|
|
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
//遍历显示页码for (var i = 1; i <= totalpage; i++) { var li; if(i===pageno){ //=========是当前页,就高亮显示 li=$('<li class="active"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >'+i+'</a></li>'); //通过类选择器,添加到ul中 $(".pagination").append(li); }else{ //========不是当前页,不高亮显示 li=$('<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >'+i+'</a></li>'); //通过类选择器,添加到ul中 $(".pagination").append(li); }} |
效果如下
给页码添加点击事件,切换数据.
当前页不需要添加点击事件
给页数里面的a标签添加onclick事件，绑定一个skippage（）函数，skippage（）函数里面所做的操作实际上就是我们获取第1页数据的向服务器发送ajax的post请求的操作，所以 把$(function(){})的代码复制到skippage（）函数中 ，然后在页面加载完成时调用skippage（）函数，传入1就表示默认加载第1页数据。此时,$(function(){})只会执行一次.而skippage()成了递归函数,自己调用自己.但一次点击事件,只会调用一次skippage方法,与java中的递归不太一样.
执行完此段代码后,点击不同的代码,发现表格的内容以及分页条会不断叠加
如下图所示:
每次加载数据时,清空数据. 清空分页条
添加了清空分页条的代码后,发现,分页条没有叠加了,但是表格还在叠加
清空表格
$("#tab").empty(); 给表格执行清空代码后发现如下现象:
表格的第一行标题没有了,所以需要用选择器,把第一行排除在外.
$("#tab tr:not(:first)")的含义是
先根据id选择器,选择表格
再由层级选择器,选择tr行
再由基本选择器not中嵌套基本选择器first,代表不是第一行
整体的意思是,选择了表格了不是第一行的元素,调用empty()方法,删除匹配的元素集合中所有的子节点。
测试后,能够不删除第一行数据
上一页判断是否可用,以及切换页码功能
如果当前页是第一页,上一页功能就不可用.
如果当前页不是第一页,就添加点击事件,切换到上一页,把页码减一.
|
1
|
|
2
3
4
5
6
7
8
9
10
|
//显示上一页,判断是否可用var preli;if(pageno===1){ //如果当前页是第一页,上一页功能就不可用 preli=$('<li class="disabled"><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >上一页</a></li>');}else{ preli=$('<li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="skippage('+(pageno-1)+')">上一页</a></li>');}//通过类选择器,添加进去$(".pagination").append(preli); |
下一页判断是否可用,以及切换页码功能
如果当前页是最后一页,上一页功能就不可用.
如果当前页不是最后一页,就添加点击事件,切换到下一页,把页码加一.
|
1
|
|
2
3
4
5
6
7
8
9
10
11
|
//显示下一页,判断是否可用var nextli;if(pageno===totalpage){ //如果当前页是最后一页,上一页功能就不可用. nextli=$('<li class="disabled"><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >下一页</a></li>');}else { //如果当前页不是最后一页,就添加点击事件,切换到上一页,把页码减一. nextli=$('<li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="skippage('+(pageno+1)+')">下一页</a></li>');}//通过类选择器,添加进去$(".pagination").append(nextli); |
至此,前端页面的代码全部完成,功能全部实现
前端页面的全部代码如下
|
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
|
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>商品展示列表</title> <!--引入bootstrap相关文件--> <link rel="stylesheet" href="/ajax_product/bootstrap/css/bootstrap.css" rel="external nofollow" rel="external nofollow" > <script type="text/javascript" src="/ajax_product/bootstrap/js/jquery-1.11.3.js"></script> <script type="text/javascript" src="/ajax_product/bootstrap/js/bootstrap.js"></script></head><script type="text/javascript"> var url ="/ajax_product/product"; var pageno=1;//当前页面设置为1 var pagesize=5;//每页显示6条商品信息 var totalpage;//一共有多少页数据 var products;//商品的数据信息 //页面加载时,向服务器发送请求,接收全部的商品数据 $(function () { skippage(1); }); function skippage(page) { //===========分页时的post请求=================================== pageno=page; //=====向服务器发送post请求 $.post( url,//给服务器传送数据的地址 {"pageno": pageno, "pagesize": pagesize},//给浏览器传递当前页面数和每页显示的条数 function (data) { //解析服务器端传过来的全部pagebean数据,格式为json类型 var pagebean = eval(data); //同步数据 pageno=pagebean.pageno; pagesize=pagebean.pagesize; totalpage=pagebean.totalpage; products=pagebean.products; //显示表格中的数据=============================================== //$("#tab").empty(); $("#tab tr:not(:first)").empty(); for (var i = 0; i < products.length; i++) { //遍历每一行的数据 var protd =$("<tr><td>"+products[i].id+"</td><td>"+products[i].name+" </td><td>"+products[i].count+"</td><td>"+products[i].price+"</td></tr>"); // 并添加到表格中,添加数据到表格中 $("#tab").append(protd); } //显示分页条的数据======================================================== //清空分页条 $(".pagination").empty(); //先不考虑功能,先能显示出来 //显示上一页,判断是否可用 var preli; if(pageno===1){ //如果当前页是第一页,上一页功能就不可用. preli=$('<li class="disabled"><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >上一页</a> </li>'); }else{ //如果当前页不是第一页,就添加点击事件,切换到上一页,把页码减一. preli=$('<li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="skippage('+(pageno- 1)+')">上一页</a></li>'); } //通过类选择器,添加进去 $(".pagination").append(preli); //遍历显示页码 for (var i = 1; i <= totalpage; i++) { var li; if(i===pageno){ //=========是当前页,就高亮显示 li=$('<li class="active"><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >'+i+'</a> </li>'); //通过类选择器,添加到ul中 $(".pagination").append(li); }else{ //========不是当前页,不高亮显示.添加点击事件,参数传递为当前页码 li=$('<li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="skippage('+i+')">'+i+'</a></li>'); //通过类选择器,添加到ul中 $(".pagination").append(li); } } //显示下一页,判断是否可用 var nextli; if(pageno===totalpage){ //如果当前页是最后一页,上一页功能就不可用. nextli=$('<li class="disabled"><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >下一页</a> </li>'); }else { //如果当前页不是最后一页,就添加点击事件,切换到上一页,把页码减一. nextli=$('<li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="skippage('+ (pageno+1)+')">下一页</a></li>'); } //通过类选择器,添加进去 $(".pagination").append(nextli); },"json") }</script><body><h3 align="center">促销商品展示</h3><div class="container"> <!--商品的表格占一行--> <div class="row"> <div class="col-md-12"> <!--table-hover表示当鼠标移入这一行表格的时候,颜色变化 table-bordered表示给表格加边框 --> <table class="table table-hover table-bordered" id="tab"> <tr> <th>编号</th> <th>商品名称</th> <th>商品数量</th> <th>商品单价</th> </tr> </table> </div> </div> <div class="row"> <div class="col-md-4 col-md-offset-4" > <nav> <ul class="pagination"> <!--此处代码由js动态生成 --> </ul> </nav> </div> </div></div></body></html> |
总结
此分页功能,用到了javaee的三层架构的思想.每一层各司其职,做各自的负责的事情.前端部分为难点.需要处理的细节很多.前端涉及到了ajax和jquery.jquery的一些语法与选择器的相关的东西要非常熟练.还用到了bootrap响应式开发,让前端页面的布局更加方便.
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://www.jianshu.com/p/1fd6b39e98ac
