前端-分页翻页中页码处理html、vue通用,单页请求ajax

一、html
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
.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;
}  
	</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  "goFristPage()">首页
      </span>
    </li>
    <li class="pre-page">
      <span "goPretPage()">上一页
      </span>
    </li>
    <div class="page-box">
      <li class="active">
        <span "goPage(this)">1</span>
      </li>
    </div>
    <li class="next-page">
      <span "goNextPage()">下一页
      </span>
    </li>
    <li class="end-page">
      <span "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 "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>

二.vue

<template>
	<div class="wapper navigation-div">
		<nav aria-label="Page navigation">
	        <ul class="pagination">
	        	<li :class="{'disabled':curPage==1}">
	                <a href="javascript:;" @click="goFristPage()" aria-label="Previous">
	                    <span aria-hidden="true">首页</span>
	                </a>
	            </li>
	            <li :class="{'disabled':curPage==1}">
	                <a href="javascript:;" @click="goPage(curPage==1?1:curPage-1)" aria-label="Previous">
	                    <span aria-hidden="true">上一页</span>
	                </a>
	            </li>
	            <li v-for="(page, index) in showPageBtn" :class="{'active':page==curPage}" :key="index">
	                <a href="javascript:;" v-if="page" @click="goPage(page)">{{page}}</a>
	                <a href="javascript:;" v-else>···</a>
	            </li>
	            <li :class="{'disabled':curPage==pages}">
	                <a href="javascript:;" @click="goPage(curPage==pages?pages:curPage+1)" aria-label="Next">
	                    <span aria-hidden="true">下一页</span>
	                </a>
	            </li>
	            <li :class="{'disabled':curPage==pages}">
	                <a href="javascript:;" @click="goEndPage()" aria-label="Previous">
	                    <span aria-hidden="true">尾页</span>
	                </a>
	            </li>
	            <li :class="{'disabled':pages==pages}">
	                <a class="page-info" href="javascript:void(0);">
	                    当前第{{current}}页/共{{pages}}页
	                </a>
	            </li>
	            <li class="el-pagination__jump">
	            	<span class="no-border">转到</span>
	            	<div class="el-input el-pagination__editor is-in-pagination">
	            		<input type="text" autocomplete="off" min="1" maxlength="4" class="el-input__inner"
	            			v-model.lazy="inputVal"
	            			@blur="[inputChan()]"
                    @keyup="[inputChan()]"
                    @afterpaste="[inputChan()]"
	            			>
	            	</div>
	            	<span class="no-border">页</span>
	            </li>
	        </ul>
	    </nav>
	</div>
</template>

<script>
	export default{
		name:"navigation",
		props:{
			pages: {
        type: Number,
        default: 1
      }
		},
		mounted: function(){
      this.inputVal = this.curPage;
		},
		data () {
			return{
        curPage: 1,
        inputVal: 1,
        current:1
			}
		},
		computed: {
      // 显示分页按钮
      showPageBtn:function() {
        let pageNum = this.pages; // 总页数
        let index = this.curPage; // 当前页
        let 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];
      }
    },
    methods: {
      regValMax(){
        let max = this.inputVal + '';
        this.inputVal=parseInt(max.replace(/\D/g,''));
      },
      goPage:function(page) {
        console.log('[jinliale]');

        this.current=this.curPage;
        if (page != this.curPage) {
          console.log(page);
          this.curPage = page;
          this.inputVal=this.curPage;
          this.$emit('navpage', this.curPage);
          this.current = page;
        }else{
          console.log('Already in the current page');
        }
      },
      goFristPage:function(){
        // this.curPage = 1;
        this.goPage(1);
      },
      goEndPage:function(){
        // this.curPage = this.pages;
        this.goPage(this.pages);
      },
      inputChan:function(){
        let max = this.inputVal + '';
        this.inputVal=parseInt(max.replace(/\D/g,''));
        if(this.inputVal > this.pages){
          this.inputVal = this.pages;
        } else if(this.inputVal>=1 &&  this.inputVal <= this.pages){

        } else{
          this.inputVal = 1;
        }
        this.goPage(this.inputVal*1);
      }
    }
	}
</script>
<style scoped="scoped">
	.navigation-div{
		text-align: right;
		margin-right: 50px;
		padding-bottom: 20px;
	}
	.pagination>li>a, .pagination>li>span {
	    position: relative;
	    float: left;
	    padding: 5px 12px;
	    margin-left: -1px;
	    line-height: 1.42857143;
	    color: #337ab7;
	    text-decoration: none;
	    background-color: #fff;
	    border: 1px solid #cccccc;
	    border-radius:2px;
	    color:#999999;
	    margin-left: 10px;
	}
	.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover {
	    z-index: 0;
	    color:#f55555;
	    cursor: default;
	    background:rgba(245,85,85,0.20);
		border:1px solid #f55555;
	}
	.page-info{
		border: none !important;
	}
	.el-input__inner{
		min-width: 32px;
    	height: 32px !important;
    	text-align: center;
    	border:1px solid #cccccc;
		border-radius:2px;
		color:#999999;
	}
	.el-pagination__jump{
		color:#999999;
		display: inline-flex;
		margin-left: 10px;
	}
	.is-in-pagination{
		margin:auto 10px;
	}
	.no-border{
		border: none !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		margin: 0 !important;
	}
</style>

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页