<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>黑马旅游-搜索</title>
<link rel="stylesheet" type="text/css" href="css/common.css">
<link rel="stylesheet" href="css/search.css">
<script src="js/jquery-3.3.1.js"></script>
<script>
$(function () {
var search = location.search;
var cid = search.split("=")[1];
load(cid);
});
function load(cid,currentPage) {
//发送ajax请求，请求"route/pageQuery，传递cid
$.get("route/pageQuery",{cid:cid,currentPage:currentPage},function (data) {
//解析pagebean数据，展示到页面上
//1、分页工具条数据展示
//1.1、展示总页码和总记录数
$("#totalPage").html(data.totalPage);
$("#totalCount").html(data.totalCount);
//1.2、展示分页页码
/*
<li><a href="">首页</a></li>
<li class="threeword"><a href="#">上一页</a></li>
<li><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 firstPage = ' <li onclick="javacript:load(' + cid + ')"><a href="javascript:void(0)">首页</a></li>';
//计算上一页的页码
var beforeNum=data.currentPage-1;
if (beforeNum<=0) {
beforeNum = 1;
}
var beforePage = '<li class="threeword" onclick="javacript:load(' + cid + ',' + beforeNum + ')"><a href="javascript:void(0)">上一页</a></li>';
lis+=firstPage;
lis+=beforePage;
//展示分页页码
/*
1、一共展示10个页码，能够达到前五后四的效果
2、如果前面不足5个，后面补全10个
3、如果后面不足4个，前面补全10
*/
//定义开始位置和结束位置
var begin ;
var end;
if(data.totalPage<10){
//总页码不足10页
begin = 1;
end = data.totalPage;
}else{
//总页码大于10页
begin = data.currentPage-5;
end = data.currentPage+4;
// 2、如果前面不足5个，后面补全10个
if(begin < 1){
begin =1;
end = begin + 9;
}
if(end > data.totalPage){
end = data.totalPage;
begin = end - 9;
}
}
for(var i =begin; i<=end;i++){
var li='';
if(data.currentPage==i){
//创建页码的li
li=' <li class="curPage" onclick="javacript:load('+cid+','+i+')"><a href="javascript:void(0)">'+i+'</a></li>';
}else {
//创建页码的li
li=' <li onclick="javacript:load('+cid+','+i+')"><a href="javascript:void(0);">'+i+'</a></li>';
}
/* for(var i=1;i<=data.totalPage;i++){
var li='';
if(data.currentPage==i){
//创建页码的li
li=' <li class="curPage" onclick="javacript:load('+cid+','+i+')"><a href="javascript:void(0)">'+i+'</a></li>';
}else {
//创建页码的li
li=' <li onclick="javacript:load('+cid+','+i+')"><a href="javascript:void(0);">'+i+'</a></li>';
}*/
//拼接字符串
lis+=li;