溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
提前說明：這原本是一個Jquery分頁器，因為公司項目前后端不分離，以前的分頁用的是基于.net的分頁器。后來我引入了jquery分頁器，在我掌握Vue之后,又自己寫了一些基于Vue的插件（為什么不用成熟的Vue插件庫，還是因為前后端沒分離）但是前后端相對最開始的混雜已經算是分得很開了。
分頁器的樣式是bootstrap風格的，是一個完全自定義樣式的分頁器，這意味著你可以很輕松把它改成你想要的樣子(例子效果圖如下)。
所有的分頁器DEMO，都不會太簡單，所以想要真正的掌握（支配）一款好用的分頁插件，請務必耐心看下面的使用示例代碼（本demo的下載地址，點擊可以作為項目直接打開使用），另外也寫了詳細的注釋并盡可能的保證簡單好用。
引用bootstrap(如果你希望是bootstrap風格)
或者你完全可以自己寫自己想要的風格！因為分頁器的html結構是js生成的。
需要引用的腳本文件有(資源均在文章底部下載包里)。
按如下順序引入：
1.jQuery
2.Vue
3.jgPaginator.js
貼代碼，看注釋：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>分頁組件</title>
<link rel="stylesheet" href="../../css/bootstrap.min.css" >
<style>
html,
body {
width: 100%;
height: 100%;
}
.page-container {
width: 1200px;
border: 1px solid #000;
margin: 50px auto 0 auto;
overflow: hidden;
}
.page-content{
margin: 50px 0;
}
/*jqPaginator分頁控件樣式*/
.hiddenPager {
visibility: hidden;
}
.jqPager {
position: relative;
width: 100%;
height: 40px;
padding: 25px 0;
background-color: #FFF;
}
.jqPager .pagination {
float: initial;
display: inline-block;
position: absolute;
top: 0;
left: 0;
right: 0;
margin: 0 auto;
text-align: center;
}
.jqPager .pagination li {
display: inline-block;
}
.jqPager .pagination li a {
padding: 4px 10px;
}
/*跳頁--選用功能*/
.jumpBox {
position: absolute;
top: 0;
right: 105px;
}
.jumppage {
display: block;
width: 42px;
padding-left: 8px;
float: left;
height: 34px;
outline: none;
}
.jumpbtn {
float: left;
display: block;
height: 34px;
line-height: 34px;
margin-left: 5px;
}
</style>
</head>
<body>
<div id="app" class="page-container">
<!--頁面該顯示的內容-->
<div class="page-content text-center">{{nova.text}}</div>
<!--分頁-->
<div class="jqPager" v-bind:class="{hiddenPager:hiddenPager}">
<ul id="jqPager" class="pagination cf"></ul>
<!--沒有跳頁功能可以不要下面的jumpBox-->
<div class="jumpBox">
<input type="number" class="jumppage" id="jumpPageIndex" />
<a href="javascript:;" rel="external nofollow" class="jumpbtn" v-on:click="pageSkip()">跳轉</a>
</div>
</div>
</div>
</body>
<script src="jquery-2.1.4.min.js"></script>
<script src="vue.js"></script>
<script src="jqPaginator.js"></script>
<script>
//虛擬的數據來源
var dataSource = [{
"text": "第一頁數據，應該是一個數組，包含了pageSize條數據"
}, {
"text": "第二頁數據"
}, {
"text": "第三頁數據"
},
{
"text": "第四頁數據"
},
{
"text": "第五頁數據"
},
{
"text": "第六頁數據"
}
]
//模擬后臺返回的數據
var backData = {
Data: dataSource,//返回的數據
totlaCount: 6,//搜索結果總數
Success: true//請求接口是否成功
};
/*每一頁顯示的數據條數，按照約定傳給后臺，此例為1。
需要加以說明的是這個實例你是看不出來這個參數的作用的，正如我返回數據中說的那樣，后臺給你返回的數據條數
應該是一個有 -pagesize-條數據的數組才對*/
var jqPageSize = 1;
var app = new Vue({
el: "#app",
data: {
//query是查詢條件，這里就是當前頁碼和每一頁該顯示的數據條數
query: {
pageIndex: 1,
pageSize: jqPageSize
},
nova: [],
hiddenPager: true,//是否顯示分頁
totalCount: 0,//數據總條數，后臺返回
},
methods: {
//初始化分頁,通過更改生成的html結構（給其添加class或者改變返回的DOM）可以手動配置頁器的顯示效果。
initPager: function() {
$('#jqPager').jqPaginator({
visiblePages: 1,
currentPage: 1,
totalPages: 1,
first: '<li id="first"><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >首頁</a></li>',
prev: '<li id="prev"><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >上一頁 </a></li>',
next: '<li id="next"><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >下一頁</a></li>',
last: '<li id="last"><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >尾頁</a></li>',
page: '<li class="page"><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >{{page}}</a></li>',
});
},
//獲取數據并根據結果配置分頁
getData: function() {
this.nova = backData.Data[this.query.pageIndex - 1];
this.totalCount = backData.Data.length;
this.hiddenPager = false;
//核心配置在此部，根據后臺返回數據控制分頁器該如何顯示
//想要完全掌握這個分頁器，你可以研究下jgPaginator.js源碼，很容易修改。
$('#jqPager').jqPaginator('option', {
totalCounts: app.totalCount,//后臺返回數據總數
pageSize: jqPageSize, //每一頁顯示多少條內容
currentPage: app.query.pageIndex, //現在的頁碼
visiblePages: 4, //最多顯示幾頁
//翻頁時觸發的事件
onPageChange: function(num) {
//app.query.pageIndex = num;
app.pageChangeEvent(num);//調用翻頁事件
}
});
}，
//翻頁或者跳頁事件
pageChangeEvent: function(pageIndex) {
this.query.pageIndex = Number(pageIndex);
this.getData();
},
//跳頁-選用功能，可有可無
pageSkip: function() {
var maxPage = 1;//默認可以跳的最大頁碼
var targetPage = document.getElementById("jumpPageIndex").value;//目的頁面
if(!targetPage) {
alert("請輸入頁碼");
return;
}
//計算最大可跳頁數
maxPage = Math.floor(this.totalCount / this.query.pageSize);
if(maxPage<1){
maxPage=1;
}
if(targetPage > maxPage) {
alert('超過最大頁數了，當前最大頁數是' + maxPage);
return;
}
this.pageChangeEvent(targetPage);
},
},
//這一部分的定時器是為了此例方便加上的，初始化分頁方法（initPager）要在獲取數據之前執行就可以了
mounted: function() {
this.initPager();
setTimeout(function() {
app.getData();
}, 50)
}
});
</script>
</html>
以上就是分頁的全部實現代碼，想要完全掌握，只看DEMO肯定是不夠的，所以這里是DEMO的下載地址，里面包含了所有需要引用的資源文件以及未壓縮的分頁器核心：jqPaginator.js。你需要好好看看它的源碼！
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
