当前位置：网站首页>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>
边栏推荐
- 【C＃语言】具名类型和匿名类型
- Use of Android grendao database
- Distributed network communication framework: how to publish local services into RPC services
- 抓包工具fiddler和wireshark对比
- The charm of SQL optimization! From 30248s to 0.001s
- Getting started with SQL - combined tables
- MLX90640 红外热成像仪测温传感器模块开发笔记（六）
- PTA class a 1002
- Wu Enda linear regression of machine learning
- 简单化构造函数的继承方法（二）- ES6中的class继承
猜你喜欢
The difference between equals and = =
Okaleido生态核心权益OKA，尽在聚变Mining模式
3.1 leetcode daily question 6
The charm of SQL optimization! From 30248s to 0.001s
Basics of data communication - basic knowledge of network
What will the new Fuzhou Xiamen railway bring to Fujian coastal areas?
Data communication foundation STP principle
![[qualcomm][network] QTI service analysis](/img/76/49054ff8c7215eca98cc479ab1d986.png)
[qualcomm][network] QTI service analysis
The practice of OpenCV -- bank card number recognition
Li Kou daily question 917
随机推荐
Some descriptions of DS V2 push down in spark
Use of pclint in vs2013
我们的Web3创业项目，黄了
Study on the basis of opencv
The problem of incomplete or partial display of the last recyclerview is solved
Meeting OA project (III) -- my meeting (meeting seating and submission for approval)
Deduct daily question 838 of a certain day
Modelsim installation tutorial (application not installed)
C language course design Tetris (Part 1)
Review of database -- 1. Overview
单元测试，到底什么是单元测试，为什么单测这么难写
Error in render: "typeerror: cannot read properties of undefined (reading 'length')" --- error when calling interface
PTA class a 1002
Learning about opencv (2)
Mlx90640 infrared thermal imager temperature sensor module development notes (6)
Self encapsulated database dbutils universal template
INSTALL_ FAILED_ SHARED_ USER_ Incompatible error resolution
Netease cloud UI imitation -- & gt; sidebar
Strange Towers of Hanoi|汉诺塔4柱问题
The difference between equals and = =