当前位置：网站首页>JS page turning, kkpager.js page turning
JS page turning, kkpager.js page turning
2022-07-26 13:42:00 【Tangce】
One 、
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/* Page style */
.pager-nav{
text-align: center;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
/* Page style -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;
}
/* Page style -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">
Pure thinking language / Social Media Co., Ltd
</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">
Pure thinking language / Social Media Co., Ltd
</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()"> home page
</span>
</li>
<li class="pre-page">
<span onclick="goPretPage()"> The previous page
</span>
</li>
<div class="page-box">
<li class="active">
<span onclick="goPage(this)">1</span>
</li>
</div>
<li class="next-page">
<span onclick="goNextPage()"> The next page
</span>
</li>
<li class="end-page">
<span onclick="goEndPage()"> Tail page
</span>
</li>
</ul>
<div class="total-num"> common <span class="num">0</span> Commodity </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',// For turning pages up and down
total_list = '';// Total number of articles
// Send back data , Used to store variables
var data_total_page = 1,
data_now_page = 1;
// Initial function loading
$(function(){
// var curPage = 1;
ajaxList(now_page);
// $(".next-page").on("click",function(){
// })
})
// home page
function goFristPage(){
if(data_now_page == 1){
return false
}else{
$("#loading").show();
ajaxList(1)
}
}
// Click on the previous page
function goPretPage(){
if(data_now_page > 1){
// change_now_page --
$("#loading").show();
ajaxList(data_now_page-1)
}else{
console.log(" Click next , It is already the first page ");
}
}
// Jump to the specified page
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)
}
}
}
// Click next
function goNextPage(){
if(data_now_page < data_total_page){
// now_page ++
$("#loading").show();
ajaxList(data_now_page+1)
}else{
console.log(" Click next , It's the last page ");
}
}
// Tail page
function goEndPage(){
if(data_now_page == data_total_page){
return false
}else{
$("#loading").show();
ajaxList(data_total_page)
}
}
// Empty data
function emptyPageData(){
$(".content-table-tbody").empty();
$(".userFootPrint-pagination .page-box").empty();
}
// List page number processing
function showPageBtn(data_now_page,data_total_page){
var pageNum = data_total_page;// Total number of pages
var index = data_now_page; // The current page
var arr = [];// Page array
if (pageNum <= 6) {
for (let i = 1; i <= pageNum; i++) {
arr.push(i)
}
return arr
}
// Process the page number display , Live show
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];
}
// Request list data
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,// Used to judge whether it is a wechat avatar
thumbnail_img,// Used to judge whether there is a avatar
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;// Total number of pages
data_now_page = Number(getListData.data.now_page);// The current 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(" request was aborted ")
}
})
}
</script>
</body>
</html>
second 
<!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;// Initial page
var totalPages = 10;// Total number of pages
var totalElements = 0;// Total number of articles
var ajaxPage = 0;// Page
var newPage = false;
/* Page turning */
page(pageNo, totalPages, totalElements);
function page(pageNo, totalPages, totalElements) {
if (!pageNo) {
pageNo = 1;
}
// Generate paging
// Some parameters are optional , such as lang, If there is no default value
kkpager.generPageHtml({
pno: pageNo,
// Total page number
total: totalPages,
// Total number of data
totalRecords: totalElements,
mode: 'click',// The default value is link, Optional link perhaps click
click: function (n) {
// do something
// Manually select the button
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>
边栏推荐
- TDSQL-C Serverless:助力初创企业实现降本增效
- Detailed relation extraction model casrel
- 【OAuth2】八、OAuth2登录的配置逻辑-OAuth2LoginConfigurer和OAuth2ClientConfigurer
- Pytorch学习笔记（三）模型的使用、修改、训练（CPU/GPU）及验证
- Comparison between SIGMOD function and softmax function
- How to build a customer-centric product blueprint: suggestions from the chief technology officer
- 向路由组件传递参数
- JS get the current time, time and timestamp conversion
- Code cloud, which officially supports the pages function, can deploy static pages
- Sword finger offer (IX): abnormal jumping steps
猜你喜欢
Solve the problem that the remote host cannot connect to the MySQL database
Unicode文件解析方法及存在问题
With 8 years of product experience, I have summarized these practical experience of continuous and efficient research and development
Pytoch learning notes (III) use, modification, training (cpu/gpu) and verification of the model
Jenkins 中 shell 脚本执行失败却不自行退出
历时15年、拥有5亿用户的飞信，彻底死了
Canvas upload image Base64 with cropping function jcrop.js
Feixin, which lasted 15 years and had 500million users, was completely dead
Ultimate doll 2.0 | cloud native delivery package
终极套娃 2.0 | 云原生交付的封装
随机推荐
panic: Error 1045: Access denied for user ‘root‘@‘117.61.242.215‘ (using password: YES)
With frequent data leakage and deletion events, how should enterprises build a security defense line?
We were tossed all night by a Kong performance bug
Unity中序列化类为json格式
一文学透MySQL表的创建和约束
The last time I heard about eBay, or the last time
How to remove black edges from hyperimage images (two methods)
数据泄漏、删除事件频发，企业应如何构建安全防线？
天津市应急局与驻津央企签署协议深化应急联动机制建设
The shell script in Jenkins fails to execute but does not exit by itself
Golang port scanning design
[oauth2] VII. Wechat oauth2 authorized login
How to realize the reality of temporary graphic elements
Abstract factory and its improvement examples
One stroke problem (Chinese postman problem)
估值15亿美元的独角兽被爆裁员，又一赛道遇冷？
Leetcode 2119. number reversed twice
How to write the introduction of GIS method journals and papers?
Photoshop (cc2020) unfinished
7-25 0-1 backpack (50 points)