【3.分页展示】查询只有key没有值及其他问题
2024-05-22 05:22:22
目录
旅游线路的分页展示
304的解决方法：
Redis中查询score（cid）
页面传递cid
如何将cid从route_list.html中获取
根据id查询不同类别的旅游线路数据
分页展示旅游线路数据：
分析
编码
服务器端代码编写
a.创建PageBean实体类对象
b.RouteServlet
c.RouteDao
d.RouteDaoImpl
e.RouteService
f..RouteServiceImpl
客户端代码编写
1.分页工具条数据展示
a.展示总页码和总记录数
编辑b.展示分页页码
添加首页、上一页、下一页、末页按钮效果，使其可以实现动态跳转
【错误】发现只显示10个（还未定义显示个数）应该103页全显示编辑
【原因及解决方法】原来是首页的frist的r拼错了，好家伙，改过来就好了编辑编辑
route_list.html部分代码
2.列表数据展示
【注意】之前还遗漏了一个小内容，数据第一次从数据库取出以后会缓存到Redis中，因此要显示首页后的分栏内容必须启动redis，否则分栏内容不显示
3.0版本route_list.html
旅游线路的分页展示
点击了不同的分类后，将来看到的旅游线路不一样的。通过分析数据库表结构，发现旅游线路表和分类表时一个多对一的关系
查询不同分类的旅游线路sql
Select * from tab_route where cid = ?;
类别id的传递
【问题】
测试发现findAll查询结果在f12 查看响应数据cid都为0
【出现原因】在Redis中查询score（cid），存进去分数却没有查询
【解决方法】改写方法，将之前的jedis.zrange（）改成jedis.zrangeWithScores（）
如此就可查询sortedset中的分数（cid）和值（cname），让id也能被查询出来(之前cid都是0，没有查出来）
得到Set，一个Tuple类型的集合
可以在缓存中利用带分数的withscores语句也查询得到：
返回Tuple类中包含了元素和值
点进Tuple可知，属性element是字节类型的对象，getElement返回类型是字符串String（已经自动帮转换好类型）
如果CategoryServiceImpl中data不为零，封装遍历也要发生变化
改之前只有key值没有value值，读取不到数据
for (Tuple tuple : categorys) {Category category = new Category();category.setCname(tuple.getElement());category.setCid((int)tuple.getScore());cs.add(category);}测试一下：
findAll（）方法未被调用，响应的不是想要的数据
查看控制台发现有报错：
java.lang.reflect.InvocationTargetException
at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)
at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
at java.lang.reflect.Method.invoke(Method.java:498)
at cn.itcast.travel.web.servlet.BaseServlet.service(BaseServlet.java:43)
InvocationTargetException：调用对象异常
原因：参数为null，转换类型异常。
解决：判断是否为空，为空则进行操作（如赋值）。
后来检查后发现是redis未启动，但是redis服务一直启动不了，service闪一下就不见，最后解决方法是重启电脑，好家伙
可恶，怎会如此？
HTTP 304，有时也称为“304 Not Modified”，是一种与浏览器通信的代码：“自上次访问以来，请求的资源未被修改。”本质上，服务器告诉您的浏览器，自您最近一次访问该页面以来，浏览器中存储（缓存）的资源没有被修改。反过来，您的浏览器会从缓存中检索网页的保存版本。这样做的目的是通过防止浏览器重复下载相同的信息来提高页面速度和交付。
一些问题可能会导致HTTP 304响应不应该发生。最常见的原因包括：
1、服务器配置或域名服务器(DNS)问题
2、被感染或损坏的缓存资源（即影响浏览器的恶意软件或病毒）
304状态代码可能是由于服务器端或客户端的问题造成的，因此可能需要进行一些故障排除才能诊断和解决它。
304的解决方法：
1、清除浏览器的缓存数据
清理浏览器数据以清除缓存可能有助于访问所需的URL。这包括删除所有浏览数据、cookies和缓存信息。
除此之外我还清除了redis缓存，
在header.html加上alter语句，方便在弹窗上输出
弹窗输出正常：
Redis中查询score（cid）
CategoryServiceImpl代码：
package cn.itcast.travel.service.impl;import cn.itcast.travel.dao.CategoryDao;
import cn.itcast.travel.dao.impl.CategoryDaoImpl;
import cn.itcast.travel.domain.Category;
import cn.itcast.travel.service.CategoryService;
import cn.itcast.travel.util.JedisUtil;
import redis.clients.jedis.Jedis;
import redis.clients.jedis.Tuple;import java.util.ArrayList;
import java.util.List;
import java.util.Set;/*** @author 乱码酱* @date ：2023-01-04 10:58* @program: hello_maven* @create:*/
public class CategoryServiceImpl implements CategoryService {private CategoryDao categoryDao = new CategoryDaoImpl();@Override //查询所有方法public List<Category> findAll() {//1.从redis中查询//1.1获取jedis客户端Jedis jedis = JedisUtil.getJedis();//1.2可使用sortedset排序查询(有序且唯一)
// Set<String> categorys = jedis.zrange("category", 0, -1);
//1.3查询sortedset中的分数（cid）和值（cname） 为了让id也能被查询出来(之前cid都是0，没有查出来Set<Tuple> categorys = jedis.zrangeWithScores("category", 0, -1);//tuples元组List<Category> cs = null;//2.判断查询的集合是否为空if (categorys == null || categorys.size() == 0) {System.out.println("从数据库查询....");//3.如果为空,需要从数据库查询,在将数据存入redis//3.1 从数据库查询cs = categoryDao.findAll();//3.2 将集合数据存储到redis中名为category的keyfor (int i = 0; i < cs.size(); i++) {jedis.zadd("category", cs.get(i).getCid(), cs.get(i).getCname());}} else {System.out.println("从redis中查询.....");//4.如果不为空,将set的数据存入listcs = new ArrayList<Category>();
// Category实体类中，for (Tuple tuple : categorys) {Category category = new Category();category.setCname(tuple.getElement());category.setCid((int)tuple.getScore());cs.add(category);}}return cs;}
}页面传递cid
header.html传递cid
var li = '<li><a href="route_list.html?cid='+data[i].cid+'">'+data[i].cname+'</a></li>';如何将cid从route_list.html中获取
【新方法】location中的search()方法 设置或返回从问号(?)开始的URL(查询部分).
测试一下
正确输出：
获取cid
$(function () {//location中的search()方法 设置或返回从问号(?)开始的URL(查询部分).var search = location.search;// alert(search);//测试一下// 切割字符串，拿到第二个值var cid = search.split("=")[1];});根据id查询不同类别的旅游线路数据
分页展示旅游线路数据：
分析
之前的分页查询都是同步查询，客户端要等待服务区端的响应，而今天使用的是异步查询，服务器端无需等待服务器端响应，大大提高查询效率
编码
服务器端代码编写
a.创建PageBean实体类对象
package cn.itcast.travel.domain;import java.util.List;/*** @author 乱码酱* @date ：2023-01-09 14:57* @program: hello_maven* @create:分页对象*/
public class PageBean {private int totalCount;//总记录数private int totalPage;//总页数private int currentPage;//当前页码private int pageSize;//每页显示的条数private List<T> list;//每页显示的数据集合public int getTotalCount() {return totalCount;}public void setTotalCount(int totalCount) {this.totalCount = totalCount;}public int getTotalPage() {return totalPage;}public void setTotalPage(int totalPage) {this.totalPage = totalPage;}public int getCurrentPage() {return currentPage;}public void setCurrentPage(int currentPage) {this.currentPage = currentPage;}public int getPageSize() {return pageSize;}public void setPageSize(int pageSize) {this.pageSize = pageSize;}public List<T> getList() {return list;}public void setList(List<T> list) {this.list = list;}private class T {}
}b.RouteServlet
/*** @author 乱码酱* @date ：2023-01-09 15:01* @program: hello_maven* @create:*/
@WebServlet("/route/*")
public class RouteServlet extends BaseServlet {private RouteService routeService = new RouteServiceImpl();/*** 分页查询* @param request* @param response* @throws ServletException* @throws IOException*/public void pageQuery(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//1.接受参数String currentPageStr = request.getParameter("currentPage"); //当前页码String pageSizeStr = request.getParameter("pageSize");//每页显示的条数String cidStr = request.getParameter("cid");//分页idint cid = 0;//类别id//2.处理参数if(cidStr != null && cidStr.length() > 0){cid = Integer.parseInt(cidStr);}int currentPage = 0;//当前页码，如果不传递，则默认为第一页if(currentPageStr != null && currentPageStr.length() > 0){currentPage = Integer.parseInt(currentPageStr);}else{currentPage = 1;}int pageSize = 0;//每页显示条数，如果不传递，默认每页显示5条记录if(pageSizeStr != null && pageSizeStr.length() > 0){pageSize = Integer.parseInt(pageSizeStr);}else{pageSize = 5;}//3. 调用service查询PageBean对象PageBean<Route> pb = routeService.pageQuery(cid, currentPage, pageSize);//4. 将pageBean对象序列化为json，返回writeValue(pb,response);}}
c.RouteDao
通过分析PageBean可以得知：
totalCount总记录数 需要从数据库查询得到
currentPage当前页码 & pageSize每页显示的条数 这两条是通过客户端提交的
totalPage总页数 可以通过总记录数和每页显示的条数计算得到
所以在RouteDao上有以下方法声明：
*根据cid查询总的记录数
*根据cid,start,pageSize查询当前的数据集合
/*** @author 乱码酱* @date ：2023-02-07 11:02* @program: hello_maven* @create:route接口*/
public interface RouteDao {
/*根据cid查询总的记录数*/public int findTotalCount(int cid);/*根据cid,start,pageSize查询当前的数据集合*/public List<Route> findByPage(int cid, int start, int pageSize);
}d.RouteDaoImpl
查询语句String sql = "select * from tab_route where cid=? limit ? , ?";
其中limit后的两个问号，第一个表示从哪里开始，第二个表示查询多少个记录
/*** @author 乱码酱* @date ：2023-02-07 11:08* @program: hello_maven* @create:RouteDao实现类*/
public class RouteDaoImpl implements RouteDao {private JdbcTemplate template = new JdbcTemplate(JDBCUtils.getDataSource());/*根据cid查询总的记录数*/@Overridepublic int findTotalCount(int cid) {String sql = "select count(*) from tab_route where cid = ?";return template.queryForObject(sql,Integer.class,cid);}/*根据cid,start,pageSize查询当前的数据集合*/@Overridepublic List<Route> findByPage(int cid, int start, int pageSize) {String sql = "select * from tab_route where cid=? limit ? , ?";//limit后的两个问号，第一个表示从哪里开始，第二个表示查询多少个记录return template.query(sql,new BeanPropertyRowMapper<Route>(Route.class),cid, start, pageSize);}
}
e.RouteService
/*** @author 乱码酱* @date ：2023-01-09 15:34* @program: hello_maven* @create:线路Service*/
public interface RouteService {
// 根据类别进行分页查询public PageBean<Route> pageQuery(int cid, int currentPage, int pageSize);
}f..RouteServiceImpl
测试时出现了一个小问题
Error:(35,20) java: 不兼容的类型: java.util.List<cn.itcast.travel.domain.Route>无法转换为java.util.List<cn.itcast.travel.domain.PageBean<cn.itcast.travel.domain.Route>.T>
按着想法删了语句之后就成功啦
点击进入
在网址输入我们要查询的cid “/route/pageQuery?cid=5” 即可查找到对应信息的json文件
将其复制下来放到网上的Json在线解析，
{"totalCount":513,"totalPage":103,"currentPage":1,"pageSize":5,"list":[{"rid":1,"rname":"【旅展 半价特惠 重走丝路•漫游宁夏 双飞4天】银川西部影视城 穆民新村 中卫沙坡头【品美酒 回族学唱花儿 感悟民俗】","price":999.0,"routeIntroduce":"走进【宁夏沙坡头】，感受西北大漠风情、体会“大漠孤烟直，长河落日圆”的塞上风光！","rflag":"1","rdate":"2018-02-09 01:13:16","isThemeTour":"0","count":0,"cid":5,"rimage":"img/product/small/m304b69a4c8328f7d6b8d5dadef020fe07.jpg","sid":1,"sourceId":"23677","category":null,"seller":null,"routeImgList":null},{"rid":2,"rname":"【官网专享 立减¥500 张家界天门山+大峡谷+凤凰古城+玻璃栈道+玻璃桥 高铁4天 无自费5钻】印象鲵宴-赶年宴+2晚蓝湾博格酒店","price":1799.0,"routeIntroduce":"官网专线，顶级品质！全程超豪华住宿，2晚入住超豪华铂金-蓝湾博格国际酒店，独家尊享金马VIP贵宾专用楼层。","rflag":"1","rdate":"2018-02-09 01:13:17","isThemeTour":"0","count":990,"cid":5,"rimage":"img/product/small/m34866f055de8630e94e25c40f277a79ba.jpg","sid":1,"sourceId":"22066","category":null,"seller":null,"routeImgList":null},{"rid":3,"rname":"【官网专享 5折预售 越南下龙湾+河内+芒街 高铁4天 高级团】双导游服务 免收服务小费【越超值·美食越南】","price":1199.0,"routeIntroduce":"双导游服务，免收服务小费，周全照顾贴心服务随心出游！品尝越南特色国宝美食，升级一餐越式炸鸡火锅宴！","rflag":"1","rdate":"2018-02-09 01:13:17","isThemeTour":"0","count":0,"cid":5,"rimage":"img/product/small/m3db4d2277b5df3d98597f79082ef92d6d.jpg","sid":1,"sourceId":"21998","category":null,"seller":null,"routeImgList":null},{"rid":4,"rname":"【官网专享 送箱 ¥1099秒杀 华东五市+乌镇+南浔 双飞6天 南京进上海出】升级1晚豪华酒店 漫步西湖【水墨江南】","price":1099.0,"routeIntroduce":"升级入住1晚豪华酒店；畅玩江南两大经典水乡——乌镇水乡和南浔水乡，体验这里的历史文化底蕴、清丽婉约的水乡古镇风貌。","rflag":"1","rdate":"2018-02-09 01:13:17","isThemeTour":"0","count":0,"cid":5,"rimage":"img/product/small/m3d91ef60e0c7fdeee97a4e2d3e5a42e84.jpg","sid":1,"sourceId":"21943","category":null,"seller":null,"routeImgList":null},{"rid":5,"rname":"梅州 双飞3天2晚 自由行套票【含广州直飞梅州早对晚含税往返机票+2晚梅州市区酒店】","price":999.0,"routeIntroduce":"含广州直飞梅州早对晚含税往返机票+2晚梅州市区酒店！","rflag":"1","rdate":"2018-02-09 01:13:17","isThemeTour":"0","count":0,"cid":5,"rimage":"img/product/small/m3ac1aa10b493b4b22221e19ba39f7e6a1.jpg","sid":1,"sourceId":"21917","category":null,"seller":null,"routeImgList":null}]}可得到
"totalCount": 513,
"totalPage": 103,
"currentPage": 1,
"pageSize": 5,和数据库查询得到的结果一致，说明编写的后台服务器端代码是正确的
完整代码如下
/*** @author 乱码酱* @date ：2023-01-09 15:48* @program: hello_maven* @create:*/
public class RouteServiceImpl implements RouteService {private RouteDao routeDao = new RouteDaoImpl();@Override //根据类别进行分页查询public PageBean<Route> pageQuery(int cid, int currentPage, int pageSize) {//封装PageBeanPageBean<Route> pb = new PageBean<Route>();//设置当前页码（客户端提交的）pb.setCurrentPage(currentPage);//设置每页显示条数（客户端提交的）pb.setPageSize(pageSize);//设置总记录数（数据库查询得到 ）int totalCount = routeDao.findTotalCount(cid);pb.setTotalCount(totalCount);//设置当前页显示的数据结合int start = (currentPage - 1) * pageSize; //开始的记录数List<Route> list = routeDao.findByPage(cid, start, pageSize);pb.setList(list);//设置总页数（可以通过 总记录数/每页显示条数 计算得到）int totalPage = totalCount % pageSize == 0 ? (totalCount / pageSize) : (totalCount / pageSize) + 1 ;//通过totalCount对pageSize进行取模运算，若能被整取则返回第一个值，若不能则返回第二个值pb.setTotalPage(totalPage);return pb;}
}客户端代码编写
1.分页工具条数据展示
a.展示总页码和总记录数
在展示页码和总页数的代码可以看到是写死的数据，即假数据，我们要将真实的数据动态地展示出来
通过加入id和编写代码使其能获取到真实数据
对应的操作
此时分页展示的内容还是静态的
要想变成动态的还要加<ul>的id如下
<ul id="pageNum">b.展示分页页码
在展示分页页码需要将原有的写死的部分改写为动态输出
原来的效果（写死假的）
后来的效果（动态的）
添加首页、上一页、下一页、末页按钮效果，使其可以实现动态跳转
【错误】发现只显示10个（还未定义显示个数）应该103页全显示
【原因及解决方法】原来是首页的frist的r拼错了，好家伙，改过来就好了
成了
route_list.html部分代码
//发送ajax请求，请求route/pageQuery方法，传递cid$.get("route/pageQuery", {cid: cid}, function (pb) {//解析pageBean数据，展示到页面上//1.分页工具条数据展示//1.1 展示总页码和总记录数$("#totalPage").html(pb.totalPage);$("#totalCount").html(pb.totalCount);/* <li><a href="">首页</a></li><li class="threeword"><a href="#">上一页</a></li><li class="curPage"><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li><li><a href="#">6</a></li><li><a href="#">7</a></li><li><a href="#">8</a></li><li><a href="#">9</a></li><li><a href="#">10</a></li><li class="threeword"><a href="javascript:;">下一页</a></li><li class="threeword"><a href="javascript:;">末页</a></li>*/var lis = "";var fristPage = '<li><a href="">首页</a></li>';var beforePage = '<li class="threeword"><a href="#">上一页</a></li>';lis += fristPage;lis += beforePage;//1.2 展示分页页码for (var i = 1; i <= pb.totalPage; i++) {//创建页码的livar li = '<li><a href="#">'+i+'</a></li>';//拼接字符串lis += li;}var lastPage = '<li class="threeword"><a href="javascript:;">末页</a></li>';var nextPage = '<li class="threeword"><a href="javascript:;">下一页</a></li>';lis += nextPage;lis += lastPage;//将lis内容设置到 ul$("#pageNum").html(lis);});2.列表数据展示
既然要展示列表数据，那就要for循环，将json编译的内容放到循环里
改变一些内容使其动态，例如图片路径 img src="xxxx"、标题rname、内容routeIntroduce、价格price……
{"totalCount": 513,"totalPage": 103,"currentPage": 1,"pageSize": 5,"list": [{"rid": 1,"rname": "【旅展 半价特惠 重走丝路•漫游宁夏 双飞4天】银川西部影视城 穆民新村 中卫沙坡头【品美酒 回族学唱花儿 感悟民俗】","price": 999.0,"routeIntroduce": "走进【宁夏沙坡头】，感受西北大漠风情、体会“大漠孤烟直，长河落日圆”的塞上风光！","rflag": "1","rdate": "2018-02-09 01:13:16","isThemeTour": "0","count": 0,"cid": 5,"rimage": "img/product/small/m304b69a4c8328f7d6b8d5dadef020fe07.jpg","sid": 1,"sourceId": "23677","category": null,"seller": null,"routeImgList": null}, {"rid": 2,"rname": "【官网专享 立减¥500 张家界天门山+大峡谷+凤凰古城+玻璃栈道+玻璃桥 高铁4天 无自费5钻】印象鲵宴-赶年宴+2晚蓝湾博格酒店","price": 1799.0,"routeIntroduce": "官网专线，顶级品质！全程超豪华住宿，2晚入住超豪华铂金-蓝湾博格国际酒店，独家尊享金马VIP贵宾专用楼层。","rflag": "1","rdate": "2018-02-09 01:13:17","isThemeTour": "0","count": 990,"cid": 5,"rimage": "img/product/small/m34866f055de8630e94e25c40f277a79ba.jpg","sid": 1,"sourceId": "22066","category": null,"seller": null,"routeImgList": null}, {"rid": 3,"rname": "【官网专享 5折预售 越南下龙湾+河内+芒街 高铁4天 高级团】双导游服务 免收服务小费【越超值·美食越南】","price": 1199.0,"routeIntroduce": "双导游服务，免收服务小费，周全照顾贴心服务随心出游！品尝越南特色国宝美食，升级一餐越式炸鸡火锅宴！","rflag": "1","rdate": "2018-02-09 01:13:17","isThemeTour": "0","count": 0,"cid": 5,"rimage": "img/product/small/m3db4d2277b5df3d98597f79082ef92d6d.jpg","sid": 1,"sourceId": "21998","category": null,"seller": null,"routeImgList": null}, {"rid": 4,"rname": "【官网专享 送箱 ¥1099秒杀 华东五市+乌镇+南浔 双飞6天 南京进上海出】升级1晚豪华酒店 漫步西湖【水墨江南】","price": 1099.0,"routeIntroduce": "升级入住1晚豪华酒店；畅玩江南两大经典水乡——乌镇水乡和南浔水乡，体验这里的历史文化底蕴、清丽婉约的水乡古镇风貌。","rflag": "1","rdate": "2018-02-09 01:13:17","isThemeTour": "0","count": 0,"cid": 5,"rimage": "img/product/small/m3d91ef60e0c7fdeee97a4e2d3e5a42e84.jpg","sid": 1,"sourceId": "21943","category": null,"seller": null,"routeImgList": null}, {"rid": 5,"rname": "梅州 双飞3天2晚 自由行套票【含广州直飞梅州早对晚含税往返机票+2晚梅州市区酒店】","price": 999.0,"routeIntroduce": "含广州直飞梅州早对晚含税往返机票+2晚梅州市区酒店！","rflag": "1","rdate": "2018-02-09 01:13:17","isThemeTour": "0","count": 0,"cid": 5,"rimage": "img/product/small/m3ac1aa10b493b4b22221e19ba39f7e6a1.jpg","sid": 1,"sourceId": "21917","category": null,"seller": null,"routeImgList": null}]
}
【错误记录】写好代码发现网页无论怎么刷新都无动于衷
后面仔细核对都发现代码没有问题，还是亲爱的大头妹妹慧眼如炬，看到问题——我没给
- 标签加id=“route”，最重要的一步居然忘记加了，可恶啊！
【注意】之前还遗漏了一个小内容，数据第一次从数据库取出以后会缓存到Redis中，因此要显示首页后的分栏内容必须启动redis，否则分栏内容不显示
然后我们可以着手设置分页的前进后退，现在一共513条记录103页，这样出现在同一个页面实在是太丑了，拟将分页做成每次展示10页，可以自由前进后退的效果。
将代码抽取出来，封装在一个ajax方法load（cid, currentPge）里
前页码currentPge没被调用，加上
这样做的好处是将开始内容cid&当前页码currentPge作为局部变量传过来了，可以自由调用
因为被写死了，所以要改写
我们来拼字符串
之前
之后
鼠标移动到对应的数字上会显示对应的页码
代码寄存
自己写的代码无法实现页码跳转，每次显示的都是首页内容
<script>$(function () {//location中的search()方法 设置或返回从问号(?)开始的URL(查询部分).var search = location.search;// alert(search);//测试一下// 切割字符串，拿到第二个值var cid = search.split("=")[1];//当页码加载完成后，调用load方法，发送ajax请求加载数据load(cid);});function load(cid, currentPge) {//发送ajax请求，请求route/pageQuery方法，传递cid$.get("route/pageQuery", {cid: cid,currentPge:currentPge}, function (pb) {//解析pageBean数据，展示到页面上//1.分页工具条数据展示//1.1 展示总页码和总记录数$("#totalPage").html(pb.totalPage);$("#totalCount").html(pb.totalCount);/* <li><a href="">首页</a></li><li class="threeword"><a href="#">上一页</a></li><li class="curPage"><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li><li><a href="#">6</a></li><li><a href="#">7</a></li><li><a href="#">8</a></li><li><a href="#">9</a></li><li><a href="#">10</a></li><li class="threeword"><a href="javascript:;">下一页</a></li><li class="threeword"><a href="javascript:;">末页</a></li>*/var lis = "";var fristPage = '<li onclick="javascipt:load('+cid+')"><a href="javascript:void(0)">首页</a></li>';//放到这里就可以点击框框也可以跳转 //已是首页啥也不做//计算上一页的页码 当前页码-1var beforeNum = pb.currentPage - 1;if(beforeNum <= 0){ //如果已经是最前页就回到第一页beforeNum = 1;}var beforePage = '<li onclick="javascipt:load('+cid+','+beforeNum+')" class="threeword"><a href="javascript:void(0)">上一页</a></li>';lis += fristPage;lis += beforePage;//1.2 展示分页页码/*1.一共展示10个页码，能够达到前5后4的效果2.如果前边不够5个，后边补齐10个3.如果后边不足4个，前边补齐10个*/
// 定义开始位置begin,结束位置 endvar begin; // 开始位置var end ; // 结束位置//要显示10个页码if(pb.totalPage < 10){//1.总页码不够10页begin = 1;end = pb.totalPage;}else {//2.总页码超过10页begin = pb.currentPage - 5 ;end = pb.currentPage + 4 ;//2.1如果前边不够5个，后边补齐10个if(begin < 1){begin = 1;end = begin + 9;}//2.2如果后边不足4个，前边补齐10个if(end > pb.totalPage){end = pb.totalPage;begin = end - 9 ;}}for (var i = begin; i <= end ; i++) {var li;//判断当前页码是否等于iif(pb.currentPage == i){li = '<li class="curPage" onclick="javascipt:load('+cid+','+i+')"><a href="javascript:void(0)">'+i+'</a></li>';//是当前页码添加当前页码样式}else{//创建页码的li //不是当前页码，不添加当前页码样式li = '<li onclick="javascipt:load('+cid+','+i+')"><a href="javascript:void(0)">'+i+'</a></li>';}//拼接字符串lis += li;}var lastPage = '<li class="threeword"><a href="javascript:;">末页</a></li>';var nextPage = '<li class="threeword"><a href="javascript:;">下一页</a></li>';lis += lastPage;lis += nextPage;//将lis内容设置到 ul$("#pageNum").html(lis);//2.列表数据展示var route_lis = "";for (var i = 0; i < pb.list.length; i++) {//获取{rid:1,rname:"xxx"}var route = pb.list[i];var li = '<li>\n' +
' <div class="img"><img src="' + route.rimage + '" style="width: 299px;"></div>\n' +
' <div class="text1">\n' +
' <p>' + route.rname + '</p>\n' +
' <br/>\n' +
' <p>' + route.routeIntroduce + '</p>\n' +
' </div>\n' +
' <div class="price">\n' +
' <p class="price_num">\n' +
' <span>¥</span>\n' +
' <span>' + route.price + '</span>\n' +
' <span>起</span>\n' +
' </p>\n' +
' <p><a href="route_detail.html">查看详情</a></p>\n' +
' </div>\n' +
' </li>';route_lis += li;}$("#route").html(route_lis);//将其加到route里展示出来//定位到页面顶部window.scrollTo(0,0);});}</script>这个可以，但是没有下一页和末页
$(function () {//location中的search()方法 设置或返回从问号(?)开始的URL(查询部分).var search = location.search;// alert(search);//测试一下// 切割字符串，拿到第二个值var cid = search.split("=")[1];//当页码加载完成后，调用load方法，发送ajax请求加载数据load(cid);
});function load(cid ,currentPage){//发送ajax请求，请求route/pageQuery,传递cid$.get("route/pageQuery",{cid:cid,currentPage:currentPage},function (pb) {//解析pagebean数据，展示到页面上//1.分页工具条数据展示//1.1 展示总页码和总记录数$("#totalPage").html(pb.totalPage);$("#totalCount").html(pb.totalCount);var lis = "";var fristPage = '<li onclick="javascipt:load('+cid+')"><a href="javascript:void(0)">首页</a></li>';//计算上一页的页码var beforeNum = pb.currentPage - 1;if(beforeNum <= 0){beforeNum = 1;}var beforePage = '<li onclick="javascipt:load('+cid+','+beforeNum+')" class="threeword"><a href="javascript:void(0)">上一页</a></li>';lis += fristPage;lis += beforePage;//1.2 展示分页页码/*1.一共展示10个页码，能够达到前5后4的效果2.如果前边不够5个，后边补齐10个3.如果后边不足4个，前边补齐10个*/// 定义开始位置begin,结束位置 endvar begin; // 开始位置var end ; // 结束位置//1.要显示10个页码if(pb.totalPage < 10){//总页码不够10页begin = 1;end = pb.totalPage;}else{//总页码超过10页begin = pb.currentPage - 5 ;end = pb.currentPage + 4 ;//2.如果前边不够5个，后边补齐10个if(begin < 1){begin = 1;end = begin + 9;}//3.如果后边不足4个，前边补齐10个if(end > pb.totalPage){end = pb.totalPage;begin = end - 9 ;}}for (var i = begin; i <= end ; i++) {var li;//判断当前页码是否等于iif(pb.currentPage == i){li = '<li class="curPage" onclick="javascipt:load('+cid+','+i+')"><a href="javascript:void(0)">'+i+'</a></li>';}else{//创建页码的lili = '<li onclick="javascipt:load('+cid+','+i+')"><a href="javascript:void(0)">'+i+'</a></li>';}//拼接字符串lis += li;}var lastPage = '<li class="threeword"><a href="javascript:;">末页</a></li>';var nextPage = '<li class="threeword"><a href="javascript:;">下一页</a></li>';//将lis内容设置到 ul$("#pageNum").html(lis);//2.列表数据展示var route_lis = "";for (var i = 0; i < pb.list.length; i++) {//获取{rid:1,rname:"xxx"}var route = pb.list[i];var li = '<li>\n' +' <div class="img"><img src="'+route.rimage+'" style="width: 299px;"></div>\n' +' <div class="text1">\n' +' <p>'+route.rname+'</p>\n' +' <br/>\n' +' <p>'+route.routeIntroduce+'</p>\n' +' </div>\n' +' <div class="price">\n' +' <p class="price_num">\n' +' <span>¥</span>\n' +' <span>'+route.price+'</span>\n' +' <span>起</span>\n' +' </p>\n' +' <p><a href="route_detail.html">查看详情</a></p>\n' +' </div>\n' +' </li>';route_lis += li;}$("#route").html(route_lis);//定位到页面顶部window.scrollTo(0,0);});
}结合两版代码，我终于写出来正确的版本了
3.0版本route_list.html
<script>$(function () {//location中的search()方法 设置或返回从问号(?)开始的URL(查询部分).var search = location.search;// alert(search);//测试一下// 切割字符串，拿到第二个值var cid = search.split("=")[1];//当页码加载完成后，调用load方法，发送ajax请求加载数据load(cid);});function load(cid ,currentPage){//发送ajax请求，请求route/pageQuery,传递cid$.get("route/pageQuery",{cid:cid,currentPage:currentPage},function (pb) {//解析pagebean数据，展示到页面上//1.分页工具条数据展示//1.1 展示总页码和总记录数$("#totalPage").html(pb.totalPage);$("#totalCount").html(pb.totalCount);var lis = "";var fristPage = '<li onclick="javascipt:load('+cid+')"><a href="javascript:void(0)">首页</a></li>';//onclick放到这里就可以点击框框也可以跳转 //已是首页啥也不做//计算上一页的页码 当前页码-1var beforeNum = pb.currentPage - 1;if(beforeNum <= 0){beforeNum = 1; //如果已经是最前页就回到第一页}var beforePage = '<li onclick="javascipt:load('+cid+','+beforeNum+')" class="threeword"><a href="javascript:void(0)">上一页</a></li>';lis += fristPage;lis += beforePage;//1.2 展示分页页码/*1.一共展示10个页码，能够达到前5后4的效果2.如果前边不够5个，后边补齐10个3.如果后边不足4个，前边补齐10个*/// 定义开始位置begin,结束位置 endvar begin; // 开始位置var end ; // 结束位置//1.要显示10个页码if(pb.totalPage < 10){//a.总页码不够10页(本次不存在此情况)begin = 1;end = pb.totalPage;}else{//b.总页码超过10页begin = pb.currentPage - 5 ;end = pb.currentPage + 4 ;//b.1.如果前边不够5个，后边补齐10个if(begin < 1){begin = 1;end = begin + 9;}//b.2如果后边不足4个，前边补齐10个if(end > pb.totalPage){end = pb.totalPage;begin = end - 9 ;}}//加上判断更严谨for (var i = begin; i <= end ; i++) {var li;//判断当前页码是否等于iif(pb.currentPage == i){li = '<li class="curPage" onclick="javascipt:load('+cid+','+i+')"><a href="javascript:void(0)">'+i+'</a></li>';//是当前页码添加当前页码样式class="curPage"}else{//创建页码的li //不是当前页码，不添加当前页码样式li = '<li onclick="javascipt:load('+cid+','+i+')"><a href="javascript:void(0)">'+i+'</a></li>';}//拼接字符串lis += li;}//计算后一页的页码 当前页码+1var afterNum = pb.currentPage + 1;if (afterNum > pb.totalPage){ //如果已经是最末页就回到最末页afterNum = pb.totalPage;}//后一页var nextPage = '<li onclick="javascipt:load('+cid+','+afterNum+')" class="threeword"><a href="javascript:void(0)">下一页</a></li>';//最后一页var lastPage = '<li onclick="javascipt:load('+cid+','+pb.totalPage+')" class="threeword"><a href="javascript:void(0)">末页</a></li>';lis += nextPage;lis += lastPage;//将lis内容设置到 ul$("#pageNum").html(lis);//2.列表数据展示var route_lis = "";for (var i = 0; i < pb.list.length; i++) {//获取{rid:1,rname:"xxx"}var route = pb.list[i];var li = '<li>\n' +
' <div class="img"><img src="'+route.rimage+'" style="width: 299px;"></div>\n' +
' <div class="text1">\n' +
' <p>'+route.rname+'</p>\n' +
' <br/>\n' +
' <p>'+route.routeIntroduce+'</p>\n' +
' </div>\n' +
' <div class="price">\n' +
' <p class="price_num">\n' +
' <span>¥</span>\n' +
' <span>'+route.price+'</span>\n' +
' <span>起</span>\n' +
' </p>\n' +
' <p><a href="route_detail.html">查看详情</a></p>\n' +
' </div>\n' +
' </li>';route_lis += li;}$("#route").html(route_lis);//定位到页面顶部window.scrollTo(0,0);});}</script>可以自由切换上下页和首末页，好耶！
你也来试试吧❛˓◞˂̵✧
【3.分页展示】查询只有key没有值及其他问题相关推荐
- cesium查询arcgis/wms服务并实现自定义信息框，分页展示查询要素
想实现自定义信息框,首先要在cesium初始化时,将默认的infoBox设置为false,因此要自己手动实现查询功能. 1. 监听点击事件,对arcgis/wms服务进行查询 具体实现代码如下: co ...
- 查询单个商品,分页展示商品
查询单个商品的详情 步骤分析: 在首页上 点击每个商品 <a href="/store/product?method=getById&p ...
- redis查询所有key值,redis清除所有key值
redis查询所有key值 keys * redis清除所有key值 flushall
- 房源分页展示和实现webuploader上传图片
分页展示 创建资源控制器并关联模型 php artisan make:controller Admin/FangController -r -m Models/Fang //资源路由 Route::r ...
- 黑马旅游网编写练习(6)--旅游线路分页展示功能
黑马旅游网编写练习(6)–旅游线路分页展示功能 首页的目录展示功能已经完成,在进入主页后,页面会自动向服务器发送Ajax请求,从而获取目录数据,我们将其名称cname展示到页面中:接下来要实现的是分页 ...
- 旅游网（5）-------------- 旅游线路的分页展示
旅游线路的分页展示 点击了不同的分类后,将来看到的旅游线路不一样的.通过分析数据库表结构,旅游线路表和分类表时一个多对一的关系. 解决获取cid问题 header.html var li = '< ...
- java商品展示页面代码_java学习(十四)实现商品的展示、curd以及分页展示
本文主要完成使用jdbc完成购物网站中实现:展示所有商品.添加商品.删除商品.修改单个商品.删除多个商品.分页展示的功能实现. 1.展示所有商品 本章节主要实现点击首页上展示所有商品的超链接,实现在页 ...
- java mvc 分页查询条件_java分页条件查询-GridManager.js表格插件+Pageable分页对象+mybatis pagehelper分页插件...
总览: 一. GridManager.js表格插件 直接上插件API:链接地址 感觉该插件简单好用,插件作者也是有问必答,nice 二. 添加依赖 后端: pom文件添加: 1.7.0.RELEASE ...
- JavaWeb黑马旅游网-学习笔记06【旅游线路分页展示分页展示】
Java后端 学习路线 笔记汇总表[黑马程序员] JavaWeb黑马旅游网-学习笔记01[准备工作] JavaWeb黑马旅游网-学习笔记02[注册功能] JavaWeb黑马旅游网-学习笔记03[登陆和 ...
最新文章
- 点名系统在c++中怎么做_栅格系统是怎么做设计的
- 分布式架构高可用架构篇_04_Keepalived+Nginx实现高可用Web负载均衡
- Codeforces 861D - Polycarp's phone book 字典树/hash
- Jarvis OJ web(一)
- Android 绑定远程服务出现 Not Allowed to bind service
- python random()*10的值不可能是_Python
- java log4j 热部署_JAVA类加载器分析--热部署的缺陷(有代码示例,及分析)
- MonkeyRunner学习（1）测试连接
- 5g理论速度_快看看 5G 的实际网速，失望还是兴奋？
- 多机联动方案-云真机测试
- QGIS3.20 制作栅格动画
- 安卓设备互相投屏_安卓投屏电脑版-安卓投屏下载v7.9.1-IE浏览器中文网站
- js 实现 将一句英文的首字母转大写，其它转小写
- 推荐一波 Linux 网络工具
- 使用python抓取App数据
- 健康管理系统第六天（移动端开发之体检预约_经典五表联查_调用阿里云提供的短信服务进行短信验证码发送）
- Scrapy CrawlSpider介绍和使用
- 高级shell脚本编程之函数库、信号与陷进、文件处理、数组、安全性
- noi 9267 核电站
- 微服务守护神-Sentinel-流控规则