当前位置：网站首页>js翻页、kkpager.js翻页
js翻页、kkpager.js翻页
2022-07-26 10:24:00 【唐策】
一、
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*分页样式*/
.pager-nav{
text-align: center;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
/* 分页样式-start */
.navigation-div {
overflow: auto;
padding: 20px;
}
.total-num {
float: right;
color: #999999;
line-height: 32px;
}
.userFootPrint-pagination {
overflow: auto;
float: right;
padding: 0;
margin: 0 0 0 15px;
overflow: auto;
}
.userFootPrint-pagination li {
float: left;
}
.userFootPrint-pagination .page-box {
height: 32px;
float: left;
}
.userFootPrint-pagination li.active span {
color: #f55555;
border: 1px solid #f55555;
background: #fddddd;
}
.userFootPrint-pagination li span {
display: block;
padding: 5px 12px;
margin-left: 10px;
text-decoration: none;
background-color: #fff;
border: 1px solid #cccccc;
border-radius: 2px;
color: #999999;
cursor: pointer;
}
/* 分页样式-end */
</style>
</head>
<body>
<table class="table table-hover align-center relative-table">
<tbody class="content-table-tbody">
<tr>
<td>
<a class="li-box" href="javascript:void(0)">
<div class="li-img">
<img class="touxiang" src="__ROOT__/home_source/img/pc/login/loginimg/wxph-title-imgbg.png" alt="">
<img class="touxiang-type" src="__ROOT__/home_source/img/pc/login/loginimg/wxph-title-imgbg.png" alt="">
</div>
<div class="li-text">
纯思语/社媒有限公司
</div>
</a>
</td>
<td class="gray-color">2018-11-21 18:57:00</td>
</tr>
<tr>
<td>
<a class="li-box" href="javascript:void(0)">
<div class="li-img weixin">
<img class="touxiang" src="http://open.weixin.qq.com/qr/code?username=wxzhifu" alt="">
<img class="touxiang-type" src="__ROOT__/home_source/img/pc/login/loginimg/wxph-title-imgbg.png" alt="">
</div>
<div class="li-text">
纯思语/社媒有限公司
</div>
</a>
</td>
<td class="gray-color">2018-11-21 18:57:00</td>
</tr>
</tbody>
</table>
<div class="navigation-div">
<ul class="userFootPrint-pagination">
<li>
<span onclick="goFristPage()">首页
</span>
</li>
<li class="pre-page">
<span onclick="goPretPage()">上一页
</span>
</li>
<div class="page-box">
<li class="active">
<span onclick="goPage(this)">1</span>
</li>
</div>
<li class="next-page">
<span onclick="goNextPage()">下一页
</span>
</li>
<li class="end-page">
<span onclick="goEndPage()">尾页
</span>
</li>
</ul>
<div class="total-num">共<span class="num">0</span>件商品</div>
</div>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script type="text/javascript">
var now_page = 1,
change_now_page = '1',//用于上下翻页
total_list = '';//总条数
//发送回去数据，用于存储变量
var data_total_page = 1,
data_now_page = 1;
// 初始函数加载
$(function(){
// var curPage = 1;
ajaxList(now_page);
// $(".next-page").on("click",function(){
// })
})
// 首页
function goFristPage(){
if(data_now_page == 1){
return false
}else{
$("#loading").show();
ajaxList(1)
}
}
// 点击上一页
function goPretPage(){
if(data_now_page > 1){
// change_now_page --
$("#loading").show();
ajaxList(data_now_page-1)
}else{
console.log("点击下一页,已经是最第一页");
}
}
// 跳转指定页面
function goPage(e){
var value = Number($(e).text());
console.log(value)
if(isNaN(value)){
return false
}else{
if(value !== data_now_page){
$("#loading").show();
ajaxList(value)
}
}
}
// 点击下一页
function goNextPage(){
if(data_now_page < data_total_page){
// now_page ++
$("#loading").show();
ajaxList(data_now_page+1)
}else{
console.log("点击下一页,已经是最后一页");
}
}
// 尾页
function goEndPage(){
if(data_now_page == data_total_page){
return false
}else{
$("#loading").show();
ajaxList(data_total_page)
}
}
// 清空数据
function emptyPageData(){
$(".content-table-tbody").empty();
$(".userFootPrint-pagination .page-box").empty();
}
// 列表页码处理
function showPageBtn(data_now_page,data_total_page){
var pageNum = data_total_page;// 总页数
var index = data_now_page; // 当前页
var arr = [];//页码数组
if (pageNum <= 6) {
for (let i = 1; i <= pageNum; i++) {
arr.push(i)
}
return arr
}
// 对页码显示进行处理，动态展示
if (index <= 3) return [1, 2, 3, 4, 0, pageNum];
if (index >= pageNum - 1) return [1, 0, pageNum - 3, pageNum - 2, pageNum - 1, pageNum];
if (index === 4) return [1, 2, 3, 4, 5, 0, pageNum];
if (index === pageNum - 2) return [1, 0, pageNum - 4, pageNum - 3, pageNum - 2, pageNum - 1, pageNum];
return [1, 0, index - 2,index - 1, index, index + 1, index + 2, 0, pageNum];
}
// 请求列表数据
function ajaxList(now_page){
$.ajax({
url:"{:url('home/user/userFootPrintApi')}",
type:"GET",
data:{
"p" : now_page,
},
success:function(getListData){
if(getListData.code==0){
console.log(getListData.data)
var listDatas = getListData.data.items;
var weixinOr,//用于判断是否为微信头像
thumbnail_img,//用于判断是否有头像
page_box_str = '';
for(var i = 0;i < listDatas.length; i++){
if(listDatas[i].main_type_id =="3"){
weixinOr = 'weixin'
}else{
weixinOr = ''
}
if(listDatas[i].thumbnail){
thumbnail_img = listDatas[i].thumbnail
}else{
thumbnail_img = listDatas[i].type_thumbnail
}
var str = `
<tr>
<td>
<a class="li-box" href="${listDatas[i].channel_url}">
<div class="li-img ${weixinOr}">
<img class="touxiang" src="${thumbnail_img}" alt="">
<img class="touxiang-type" src="${listDatas[i].type_thumbnail}" alt="">
</div>
<div class="li-text">
${listDatas[i].account_name}/${listDatas[i].company_name}
</div>
</a>
</td>
<td class="gray-color">${listDatas[i].create_t}</td>
</tr>
`
page_box_str += str;
// $(".content-table-tbody").append(str);
}
total_list = getListData.data.total_list;
data_total_page = getListData.data.total_page;//总页数
data_now_page = Number(getListData.data.now_page);//当前页
change_now_page = getListData.data.now_page;
var arrPage = showPageBtn(data_now_page,data_total_page),
arrPage_index,
active_li;
var page_btn_str ='';
for(var i = 0;i < arrPage.length; i ++){
if(arrPage[i] === 0){
arrPage_index = '...';
active_li = ""
}else if(arrPage[i] == now_page){
arrPage_index = arrPage[i];
active_li = "active"
}else{
arrPage_index = arrPage[i];
active_li = ""
}
var str = `
<li class="${active_li}">
<span onclick="goPage(this)">${arrPage_index}</span>
</li>
`
page_btn_str += str;
// $(".userFootPrint-pagination .page-box").append(str);
}
$("#loading").hide();
emptyPageData();
$(".navigation-div .total-num .num").text(total_list);
$(".content-table-tbody").append(page_box_str);
$(".userFootPrint-pagination .page-box").append(page_btn_str);
}
// makeMap();
},error:function(){
$("#loading").hide();
alert("请求失败")
}
})
}
</script>
</body>
</html>
第二
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="kkpager_blue.css">
</head>
<body>
<div id="kkpager"></div>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script type="text/javascript" src="kkpager.js"></script>
<script type="text/javascript">
$(function(){
var pageNo = 0;//初始页
var totalPages = 10;//总页数
var totalElements = 0;//总条数
var ajaxPage = 0;//第几页
var newPage = false;
/*翻页*/
page(pageNo, totalPages, totalElements);
function page(pageNo, totalPages, totalElements) {
if (!pageNo) {
pageNo = 1;
}
//生成分页
//有些参数是可选的，比如lang，若不传有默认值
kkpager.generPageHtml({
pno: pageNo,
//总页码
total: totalPages,
//总数据条数
totalRecords: totalElements,
mode: 'click',//默认值是link，可选link或者click
click: function (n) {
// do something
//手动选中按钮
newPage = false;
this.selectPage(n);
// var firstLevelTopicId = Number($("#tk-topicsquare-tagarea .active").attr("data-topic-id"));
// $("#tk-topicsquare-topicarea").empty();
pageNo = n;
ajaxPage = pageNo - 1;
// ajaxQuestAnswersList(ajaxPage);
return false;
}
}, newPage);
};
})
</script>
</body>
</html>
边栏推荐
猜你喜欢
Learning about tensorflow (II)
What will the new Fuzhou Xiamen railway bring to Fujian coastal areas?
Like, "new programmer" e-book is free for a limited time!
Deduct daily question 838 of a certain day
单元测试，到底什么是单元测试，为什么单测这么难写
![Structure of [Halcon vision] operator](/img/d9/e16ea52cea7897e3a1d61d83de472f.png)
Structure of [Halcon vision] operator
SQL优化的魅力！从 30248s 到 0.001s
![[qualcomm][network] QTI service analysis](/img/76/49054ff8c7215eca98cc479ab1d986.png)
[qualcomm][network] QTI service analysis
议程速递 | 7月27日分论坛议程一览
About automatic operation on Web pages
随机推荐
Data communication foundation STP principle
Wu Enda linear regression of machine learning
Using undertow, Nacos offline logout delay after service stop
【Halcon视觉】仿射变换
Okaleido ecological core equity Oka, all in fusion mining mode
About automatic operation on Web pages
Vs2019 configuring opencv
Solution of inputting whole line string after inputting integer
Employee information management system based on Web
Data communication foundation TCPIP reference model
Draco developed by Google and Pixar supports USD format to accelerate 3D object transmission & lt; Forward & gt;
Common errors when starting projects in uniapp ---appid
【有奖提问】向图灵奖得主、贝叶斯网络之父 Judea Pearl 提问啦
Study notes of the second week of sophomore year
Beginner of flask framework-04-flask blueprint and code separation
Prevent XSS attacks
面试第一家公司的面试题及答案（一）
Netease cloud UI imitation -- & gt; sidebar
Strange Towers of Hanoi|汉诺塔4柱问题
Study notes of the fifth week of sophomore year