jQuery外掛--分頁

jQuery · 發表 2019-04-03 03:44:42

摘要： HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title></title> <style&g...

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<style>
/* 外面盒子樣式---自己定義 */
.page_div{margin:20px 10px 20px 0;color:#666}
/* 頁數按鈕樣式 */
.page_div button{display:inline-block;min-width:30px;height:28px;cursor:pointer;color:#666;font-size:13px;line-height:28px;background-color:#f9f9f9;border:1px solid #dce0e0;text-align:center;margin:0 4px;-webkit-appearance: none;-moz-appearance: none;appearance: none;}
#firstPage,#lastPage,#nextPage,#prePage{width:50px;color:#0073A9;border:1px solid #0073A9}
#nextPage,#prePage{width:70px}
.page_div .current{background-color:#0073A9;border-color:#0073A9;color:#FFF}
/* 頁面數量 */
.totalPages{margin:0 10px}
.totalPages span,.totalSize span{color:#0073A9;margin:0 5px}
/*button禁用*/
.page_div button:disabled{opacity:.5;cursor:no-drop}
</style>
</head>

<body ontouchstart="" onmousemove="">
<div value="1 0"></div>
<div id="page" class="page_div"></div>
</body>
<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/page1Me.js"></script>
<script>
$("#page").paging({
// pageNo: 18,
// totalPage: 20,
// totalSize: 300,
pageNum: 5,
totalNum: 14,
totalList: 300,
callback: function (num) {
console.log(num);
}
});
// 模擬ajax資料用以下方法，方便使用者更好的掌握用法
// 引數為當前頁
// ajaxTest(1);
// function ajaxTest(num) {
//$.ajax({
//url: "table.json",
//type: "get",
//data: {},
//dataType: "json",
//success: function(data) {
//console.log(data);
////分頁
//$("#page").paging({
//pageNo: num,
//totalPage: data.totalPage,
//totalSize: data.totalSize,
//callback: function(num) {
//ajaxTest(num)
//}
//})
//}
//})
// }
</script>
</html>

JS

;(function ($, window, document, undefined) {
'use strict';
function Paging(element, options) {
this.element = element;
this.options = {
pageNum: options.pageNum || 1, // 當前頁碼
totalNum: options.totalNum, // 總頁碼
totalList: options.totalList, // 資料總記錄
callback: options.callback // 回撥函式
};
this.init();
}
Paging.prototype = {
constructor: Paging,
init: function () {
this.createHtml();
this.bindEvent();
},
createHtml: function () {
var me = this;
var content = [];
var pageNum = me.options.pageNum;
var totalNum = me.options.totalNum;
var totalList = me.options.totalList;
content.push("<button type='button' id='firstPage'>首頁</button><button type='button' id='prePage'>上一頁</button>");
// 總頁數大於6必顯示省略號
if (totalNum > 6) {
// 1、當前頁碼小於5且總頁碼大於6 省略號顯示後面+總頁碼
if (pageNum < 5) {
// 1與6主要看要顯示多少個按鈕 目前都顯示5個
for (var i = 1; i < 6; i++) {
if (pageNum !== i) {
content.push("<button type='button'>" + i + "</button>");
} else {
content.push("<button type='button' class='current'>" + i + "</button>");
}
}
content.push(". . .");
content.push("<button type='button'>" + totalNum + "</button>");
} else {
// 2、當前頁碼接近後面 中間隔3個 省略號顯示後面+總頁面
if (pageNum < totalNum - 3) {
for (var i = pageNum - 2; i < pageNum + 3; i++) {
if (pageNum !== i) {
content.push("<button type='button'>" + i + "</button>");
} else {
content.push("<button type='button' class='current'>" + i + "</button>");
}
}
content.push(". . .");
content.push("<button type='button'>" + totalNum + "</button>");
} else {
// 3、頁碼至少在5，最多在【totalNum - 3】的中間位置 第一頁+省略號顯示前面
content.push("<button type='button'>" + 1 + "</button>");
content.push(". . .");
for (var i = totalNum - 4; i < totalNum + 1; i++) {
if (pageNum !== i) {
content.push("<button type='button'>" + i + "</button>");
} else {
content.push("<button type='button' class='current'>" + i + "</button>");
}
}
}
}
} else {
// 總頁數小於6
for (var i = 1; i < totalNum + 1; i++) {
if (pageNum !== i) {
content.push("<button type='button'>" + i + "</button>");
} else {
content.push("<button type='button' class='current'>" + i + "</button>");
}
}
}
content.push("<button type='button' id='lastPage'>尾頁</button><button type='button' id='nextPage'>下一頁</button>");
content.push("<span class='totalNum'> 共 " + totalNum + " 頁 </span>");
content.push("<span class='totalList'> 共 " + totalList + " 條記錄 </span>");
me.element.html(content.join(''));

// DOM重新生成後每次呼叫是否禁用button
setTimeout(function () {
me.dis();
}, 20);
},
bindEvent: function () {
var me = this;
me.element.off('click', 'button');
// 委託新生成的dom監聽事件
me.element.on('click', 'button', function () {
var id = $(this).attr('id');
var num = parseInt($(this).html());
var pageNum = me.options.pageNum;
if (id === 'prePage') {
if (pageNum !== 1) {
me.options.pageNum -= 1;
}
} else if (id === 'nextPage') {
if (pageNum !== me.options.totalNum) {
me.options.pageNum += 1;
}
} else if (id === 'firstPage') {
if (pageNum !== 1) {
me.options.pageNum = 1;
}
} else if (id === 'lastPage') {
if (pageNum !== me.options.totalNum) {
me.options.pageNum = me.options.totalNum;
}
} else {
me.options.pageNum = num;
}
me.createHtml();
if (me.options.callback) {
me.options.callback(me.options.pageNum);
}
});
},
dis: function () {
var me = this;
var pageNum = me.options.pageNum;
var totalNum = me.options.totalNum;
if (pageNum === 1) {
me.element.children('#firstPage, #prePage').prop('disabled', true);
} else if (pageNum === totalNum) {
me.element.children('#lastPage, #nextPage').prop('disabled', true);
}
}
};
$.fn.paging = function (options) {
return new Paging($(this), options);
}
})(jQuery, window, document);

jQuery外掛友情連結

// 1、程式碼最前面的分號，可以防止多個檔案壓縮合並以為其他檔案最後一行語句沒加分號，而引起合併後的語法錯誤。

// 2、匿名函式(function(){})();：由於Javascript執行表示式是從圓括號裡面到外面，所以可以用圓括號強制執行宣告的函式。避免函式體內和外部的變數衝突。

// 3、$實參:$是jquery的簡寫，很多方法和類庫也使用$,這裡$接受jQuery物件，也是為了避免$變數衝突，保證外掛可以正常執行。

// 4、window, document實參分別接受window, document物件，window, document物件都是全域性環境下的，而在函式體內的window, document其實是區域性變數，不是全域性的window, document物件。這樣做有個好處就是可以提高效能，減少作用域鏈的查詢時間，如果你在函式體內需要多次呼叫window 或 document物件，這樣把window 或 document物件當作引數傳進去，這樣做是非常有必要的。當然如果你的外掛用不到這兩個物件，那麼就不用傳遞這兩個引數了。

// 5、undefined形參了，看起來是有點多餘。undefined在老一輩的瀏覽器是不被支援的，直接使用會報錯，js框架要考慮到相容性，因此增加一個形參undefined

jQuery外掛--分頁

HTML

JS

您可能也會喜歡…