js翻页、kkpager.js翻页

唐策 2019-05-14 17:07:29

258

分类专栏： js 文章标签： js翻页、kkpager.js翻页

本文链接：https://blog.csdn.net/qq_29132907/article/details/90210600

版权

一、
在这里插入图片描述

<!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>