帶有省略號的分頁組件
html中只要引入bootstrap、jquery以及我的js（元素的id及數據結構請根據實際情況自行修改）
<!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"> </head> <body> <div id="pub"> <nav class="pull-right my-nav"> <ul class="pagination"></ul> </nav> </div> </body> <script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" src="nav.js"></script> <script type="text/javascript"> var nav = new Nav(1, 10, 1, '1.json'); nav.myAjax(); nav.getSinglePageData(); </script> </html>
/*
* 推薦使用bootstrap中的分頁組件，然後使用本段代碼
*
* */
function Nav(pageNo, pageSize, startIndex, url) {
this.pageNo = pageNo || 1; // 第幾頁
this.pageSize = pageSize || 10; // 每頁幾個數據
this.startIndex = startIndex || 1; // 開始的頁數 只有1,11,21等等
this.url = url; // 接口地址
this.ajaxFlag = true; // 是否更新分頁導航
this.direction = "right"; // 觸發的是左側的省略號還是右側的省略號
this.allCount = 0; // 總數據條數
this.pubData = []; // ajax獲取的數據，根據具體數據需要調整
}
Nav.prototype.myAjax = function () {
var _this = this;
$.ajax({
url: _this.url,
type: "GET",
data: {
pageNo: _this.pageNo,
pageSize: _this.pageSize
},
async: true,
success: function (data) {
_this.pubData = data.data;
_this.allCount = _this.pubData.totalCount;
if (_this.ajaxFlag) {
_this.createNav();
}
},
error: function (data) {
console.log(data.code);
}
});
}
Nav.prototype.createNav = function () {
this.ajaxFlag = false;
var myNav = $("#pub .my-nav"); // 這裏的$("#pub .my-nav")請根據情況自行修改
var activeClass = "active";
// 是否給數字1active
if (this.startIndex === 1 && this.direction === "right") {
activeClass = "active";
}else {
activeClass = "";
}
// 創建 《，1
myNav.find("ul").empty();
myNav.find("ul").append($("<li><a href='javascript:void(0)'>«</a></li>"));
myNav.find("ul").append($("<li class='"+ activeClass +"'><a href='javascript:void(0)'>1</a></li>"));
// 是否創建左側省略號
if (this.startIndex !== 1) {
myNav.find("ul").append($("<li><a href='javascript:void(0)'>...</a></li>"));
}
// 循環創建中間部分
for (var i = this.startIndex; i <= this.startIndex + 9; i++) {
// 跳過第一個和最後一個
if (i === 1 || i >= Math.ceil( this.allCount / 10)) {
continue;
}
var oLi = $("<li><a href='javascript:void(0)'>" + i + "</a></li>");
// 向左時最右邊的nav添加active，向右時最左邊的添加active
if ((this.direction === "left" && i % 10 === 0) || (this.direction === "right" && i % 10 === 1)) {
oLi.addClass("active");
}
myNav.find("ul").append(oLi);
}
//判斷是否添加右側省略號
if (this.startIndex + 10 < Math.ceil(this.allCount / 10)) {
myNav.find("ul").append($("<li><a href='javascript:void(0)'>...</a></li>"));
}
// 當頁面只有一頁的時候跳過
if (Math.ceil(this.allCount / 10) !== 1) {
myNav.find("ul").append($("<li><a href='javascript:void(0)'>" + Math.ceil(this.allCount / 10) + "</a></li>"));
}
myNav.find("ul").append($("<li><a href='javascript:void(0)'>»</a></li>"));
}
Nav.prototype.getSinglePageData = function () {
var _this = this;
/*
* 外層的元素id自行修改
* 點擊事件以 activeLiIndex 爲核心
*/
$(document).on("click", "#pub .my-nav li", function () {
var activeLiIndex = $("#pub .my-nav li.active").index();
// 《 與 》兩個按鈕不會有 active
if ($(this).index() > 0 && $(this).index() < $("#pub .my-nav li").length - 1) {
activeLiIndex = $(this).index();
}
// 到最左邊和最右邊active不變
if ($(this).index() === 0) {
if (activeLiIndex == 1) {
return;
}
activeLiIndex--;
}
if ($(this).index() === $("#pub .my-nav li").length - 1) {
if (activeLiIndex == $("#pub .my-nav li").length - 2) {
return;
}
activeLiIndex++;
}
// 《 與 》兩個按鈕的 disabled屬性修改
if (activeLiIndex === 1) {
$("#pub .my-nav li").eq(0).addClass("disabled");
}else {
$("#pub .my-nav li").eq(0).removeClass("disabled");
}
if (activeLiIndex === $("#pub .my-nav li").length - 2) {
$("#pub .my-nav li").eq($("#pub .my-nav li").length - 1).addClass("disabled");
}else {
$("#pub .my-nav li").eq($("#pub .my-nav li").length - 1).removeClass("disabled");
}
$("#pub .my-nav li").removeClass("active");
$("#pub .my-nav li").eq(activeLiIndex).addClass("active");
// 如果active的按鈕是省略號，根據index（）判斷左右，然後調用ajax
if ($("#pub .my-nav li.active a").html() === "...") {
_this.ajaxFlag = true;
if ($("#pub .my-nav li.active").index() === 2) {
_this.direction = "left";
var leftHtml = $("#pub .my-nav li").eq(activeLiIndex + 1).find("a").html();
_this.pageNo = leftHtml - 1;
_this.startIndex = leftHtml - 10;
_this.myAjax();
}else{
_this.direction = "right";
var rightHtml = $("#pub .my-nav li").eq(activeLiIndex - 1).find("a").html();
_this.pageNo = rightHtml / 1 + 1;
_this.startIndex = rightHtml / 1 + 1;
_this.myAjax();
}
return;
}
// 如果active的不是省略號，調用ajax，不修改nav導航
_this.pageNo = $("#pub .my-nav li.active a").html() - 0;
_this.myAjax();
});
}