響應式前端框架Bootstrap系列（11）分頁

阿新 • • 發佈：2019-01-18

分頁功能已經封裝成一個獨立的js檔案，也是用bs完成的，名稱為bootstrap-paginator.js。

使用前先匯入檔案：

<script src="../libs/bootstrap/3.3.7/bootstrap-paginator.js"></script>

演示程式碼：

<body>
	<div class="container">
		<p>分頁</p>
		<ul id="page"></ul>
	</div>
</body>
<script>
	$(function() {
		var currentPage = 1;
		var totalPages = 2;
		$("#page").bootstrapPaginator({
			bootstrapMajorVersion: 3, //對應的bootstrap版本
			currentPage: currentPage, //當前頁數
			numberOfPages: 10, //每次顯示頁數
			totalPages: totalPages, //總頁數
			shouldShowPage: true, //是否顯示該按鈕
			useBootstrapTooltip: true,
			onPageClicked: function(event, originalEvent, type, page) {
				console.log(page);
			}
		});
	});
</script>

效果圖：

bootstrap-paginator.js檔案原始碼：

(function($) {
	"use strict";
	/**
	 * Bootstrap分頁建構函式
	 *
	 * @param 分頁的容器物件
	 * @param 分頁的相關配置
	 *
	 * */
	var BootstrapPaginator = function(element, options) {
			this.init(element, options);
		},
		old = null;

	BootstrapPaginator.prototype = {

		/**
		 * 分頁初始化, 把element和options作為引數
		 *
		 * @param element 分頁的容器物件
		 * @param options 分頁的相關配置
		 *
		 * */
		init: function(element, options) {

			this.$element = $(element);

			var version = (options && options.bootstrapMajorVersion) ? options.bootstrapMajorVersion : $.fn.bootstrapPaginator.defaults.bootstrapMajorVersion,
				id = this.$element.attr("id");
			if(version === 2 && !this.$element.is("div")) {
				throw "在Bootstrap2中，必須使用div作為分頁的容器";
			} else if(version > 2 && !this.$element.is("ul")) {
				throw "在Bootstrap3中，必須使用ul作為分頁的容器"
			}
			this.currentPage = 1;
			this.lastPage = 1;
			this.setOptions(options);
			this.initialized = true;
		},

		/**
		 * 更新分頁element的屬性
		 *
		 * @param 分頁的相關配置
		 * */
		setOptions: function(options) {

			this.options = $.extend({}, (this.options || $.fn.bootstrapPaginator.defaults), options);

			this.totalPages = parseInt(this.options.totalPages, 10); //設定總頁數
			this.numberOfPages = parseInt(this.options.numberOfPages, 10); //設定要顯示的頁數

			//設定總頁數後移除當前頁設定，否則會導致頁面異常
			if(options && typeof(options.currentPage) !== 'undefined') {

				this.setCurrentPage(options.currentPage);
			}

			this.listen();

			//呈現分頁
			this.render();

			if(!this.initialized && this.lastPage !== this.currentPage) {
				this.$element.trigger("page-changed", [this.lastPage, this.currentPage]);
			}

		},

		/**
		 * 設定時間監聽器，如果可用的話，頁面點選和切換事件是關聯的
		 *
		 * */
		listen: function() {

			this.$element.off("page-clicked");

			this.$element.off("page-changed"); // 解除安裝元素事件

			if(typeof(this.options.onPageClicked) === "function") {
				this.$element.bind("page-clicked", this.options.onPageClicked);
			}

			if(typeof(this.options.onPageChanged) === "function") {
				this.$element.on("page-changed", this.options.onPageChanged);
			}

			this.$element.bind("page-clicked", this.onPageClicked);
		},

		/**
		 *
		 *  銷燬paginator元素，首先解除安裝事件，然後清空裡面的內容。
		 *
		 * */
		destroy: function() {

			this.$element.off("page-clicked");

			this.$element.off("page-changed");

			this.$element.removeData('bootstrapPaginator');

			this.$element.empty();

		},

		/**
		 * 顯示分頁
		 *
		 * */
		show: function(page) {

			this.setCurrentPage(page);

			this.render();

			if(this.lastPage !== this.currentPage) {
				this.$element.trigger("page-changed", [this.lastPage, this.currentPage]);
			}
		},

		/**
		 * 顯示下一頁
		 *
		 * */
		showNext: function() {
			var pages = this.getPages();

			if(pages.next) {
				this.show(pages.next);
			}

		},

		/**
		 * 顯示上一頁
		 *
		 * */
		showPrevious: function() {
			var pages = this.getPages();

			if(pages.prev) {
				this.show(pages.prev);
			}

		},

		/**
		 * 顯示第一頁
		 *
		 * */
		showFirst: function() {
			var pages = this.getPages();

			if(pages.first) {
				this.show(pages.first);
			}

		},

		/**
		 * 顯示最後一頁
		 *
		 * */
		showLast: function() {
			var pages = this.getPages();

			if(pages.last) {
				this.show(pages.last);
			}

		},

		/**
		 * 頁碼單擊處理程式，單擊頁碼時，將當前頁更改為相應的頁面，並觸發監聽器的pageClick事件
		 *
		 *
		 * */
		onPageItemClicked: function(event) {

			var type = event.data.type,
				page = event.data.page;

			this.$element.trigger("page-clicked", [event, type, page]);

		},
		/**
		 * 點選跳轉事件
		 * @param event
		 */
		onPageItemJumped: function(event) {
			var type = event.data.type;
			var value = this.$element.find('input').val();
			var page = parseInt(value, 10);
			if(!isNaN(value) && page > 0 && page != this.currentPage && page <= this.totalPages) {
				this.$element.trigger("page-clicked", [event, type, page]);
			}
		},
		onPageClicked: function(event, originalEvent, type, page) {

			//顯示相應頁面，並在事件返回之前檢查新建的頁面

			var currentTarget = $(event.currentTarget);

			switch(type) {
				case "first":
					currentTarget.bootstrapPaginator("showFirst");
					break;
				case "prev":
					currentTarget.bootstrapPaginator("showPrevious");
					break;
				case "next":
					currentTarget.bootstrapPaginator("showNext");
					break;
				case "last":
					currentTarget.bootstrapPaginator("showLast");
					break;
				case "page":
					currentTarget.bootstrapPaginator("show", page);
					break;
				case "jump":
					currentTarget.bootstrapPaginator("show", page);
					break;
			}

		},

		/**
		 * 根據內部屬性和設定呈現分頁（生成分頁主函式，要修改分頁的生成主要就在這裡）
		 *
		 *
		 * */
		render: function() {

			//獲取容器class並將其新增到容器中
			var containerClass = this.getValueFromOption(this.options.containerClass, this.$element),
				size = this.options.size || "normal",
				alignment = this.options.alignment || "left",
				pages = this.getPages(),
				listContainer = this.options.bootstrapMajorVersion === 2 ? $("<ul></ul>") : this.$element,
				listContainerClass = this.options.bootstrapMajorVersion === 2 ? this.getValueFromOption(this.options.listContainerClass, listContainer) : null,
				first = null,
				prev = null,
				next = null,
				last = null,
				p = null,
				i = 0;

			this.$element.prop("class", "");

			this.$element.addClass("pagination");

			switch(size.toLowerCase()) {
				case "large":
				case "small":
				case "mini":
					this.$element.addClass($.fn.bootstrapPaginator.sizeArray[this.options.bootstrapMajorVersion][size.toLowerCase()]);
					break;
				default:
					break;
			}

			if(this.options.bootstrapMajorVersion === 2) {
				switch(alignment.toLowerCase()) {
					case "center":
						this.$element.addClass("pagination-centered");
						break;
					case "right":
						this.$element.addClass("pagination-right");
						break;
					default:
						break;
				}
			}

			this.$element.addClass(containerClass);

			//清空最外面的容器，然後把列表新增進容器中。
			this.$element.empty();

			if(this.options.bootstrapMajorVersion === 2) {
				this.$element.append(listContainer);

				listContainer.addClass(listContainerClass);
			}

			//更新頁面元素引用
			this.pageRef = [];

			if(pages.first) { //如果是第1頁
				first = this.buildPageItem("first", pages.first);
				if(first) {
					listContainer.append(first);
				}

			}

			if(pages.prev) { //如果是上一頁
				prev = this.buildPageItem("prev", pages.prev);
				if(prev) {
					listContainer.append(prev);
				}

			}

			for(i = 0; i < pages.length; i = i + 1) { //填寫數字
				p = this.buildPageItem("page", pages[i]);
				if(p) {
					listContainer.append(p);
				}
			}

			if(pages.next) { //如果是下一頁
				next = this.buildPageItem("next", pages.next);
				if(next) {
					listContainer.append(next);
				}
			}

			if(pages.last) { //如果是最後一頁
				last = this.buildPageItem("last", pages.last);
				if(last) {
					listContainer.append(last);
				}
			}
			//新加的
			var itemCustom = $("<li></li>"); //建立一個容器
			var itemHtml = "<span><input type='text' style='width: 30px;height: 20px;' value='" + this.currentPage + "'/> / " + this.totalPages + "</span>";
			itemCustom.append(itemHtml);
			listContainer.append(itemCustom);
			var itemlast = $("<li></li>"); //建立一個‘跳轉’的span
			var itemTz = $("<span style='cursor: pointer;'>跳轉</span>").on("click", null, {
				type: 'jump'
			}, $.proxy(this.onPageItemJumped, this)); //繫結點選事件
			itemlast.append(itemTz);
			listContainer.append(itemlast);
		},

		/**
		 *
		 * 根據給定的型別和頁碼建立page
		 *
		 * @param page 頁碼
		 * @param type 型別（first, prev, page, next, last）
		 *
		 * @return 構造的頁面元素
		 * */
		buildPageItem: function(type, page) {
			var itemContainer = $("<li></li>"), //建立一個容器
				itemContent = $("<a style='cursor: pointer;'></a>"), //建立一個內容
				text = "",
				title = "",
				itemContainerClass = this.options.itemContainerClass(type, page, this.currentPage),
				itemContentClass = this.getValueFromOption(this.options.itemContentClass, type, page, this.currentPage),
				tooltipOpts = null;

			switch(type) {
				case "first":
					itemContainerClass = "";
					if(!this.getValueFromOption(this.options.shouldShowPage, type, page, this.currentPage)) {
						return;
					}
					text = this.options.itemTexts(type, page, this.currentPage);
					title = this.options.tooltipTitles(type, page, this.currentPage);
					break;
				case "last":
					itemContainerClass = "";
					if(!this.getValueFromOption(this.options.shouldShowPage, type, page, this.currentPage)) {
						return;
					}
					text = this.options.itemTexts(type, page, this.currentPage);
					title = this.options.tooltipTitles(type, page, this.currentPage);
					break;
				case "prev":
					itemContainerClass = "";
					if(!this.getValueFromOption(this.options.shouldShowPage, type, page, this.currentPage)) {
						return;
					}
					text = this.options.itemTexts(type, page, this.currentPage);
					title = this.options.tooltipTitles(type, page, this.currentPage);
					break;
				case "next":
					itemContainerClass = "";
					if(!this.getValueFromOption(this.options.shouldShowPage, type, page, this.currentPage)) {
						return;
					}
					text = this.options.itemTexts(type, page, this.currentPage);
					title = this.options.tooltipTitles(type, page, this.currentPage);
					break;
				case "page":
					if(!this.getValueFromOption(this.options.shouldShowPage, type, page, this.currentPage)) {
						return;
					}
					text = this.options.itemTexts(type, page, this.currentPage);
					title = this.options.tooltipTitles(type, page, this.currentPage);
					break;
			}

			itemContainer.addClass(itemContainerClass).append(itemContent);

			itemContent.addClass(itemContentClass).html(text).on("click", null, {
				type: type,
				page: page
			}, $.proxy(this.onPageItemClicked, this));

			if(this.options.pageUrl) {
				itemContent.attr("href", this.getValueFromOption(this.options.pageUrl, type, page, this.currentPage));
			}

			if(this.options.useBootstrapTooltip) {
				tooltipOpts = $.extend({}, this.options.bootstrapTooltipOptions, {
					title: title
				});
				itemContent.tooltip(tooltipOpts);
			} else {
				itemContent.attr("title", title);
			}
			return itemContainer;
		},

		setCurrentPage: function(page) {
			if(page > this.totalPages || page < 1) { // 如果當前頁碼超出範圍，則丟擲異常

				throw "頁碼超出範圍";

			}
			this.lastPage = this.currentPage;
			this.currentPage = parseInt(page, 10);
		},

		/**
		 * 獲取表示頁面物件當前狀態的陣列。
		 *
		 * @return 輸出具有first, prev, next, last和中間頁碼的物件.
		 * */
		getPages: function() {
			var totalPages = this.totalPages, //通過總記錄獲取或計算總頁數
				pageStart = (this.currentPage % this.numberOfPages === 0) ? (parseInt(this.currentPage / this.numberOfPages, 10) - 1) * this.numberOfPages + 1 : parseInt(this.currentPage / this.numberOfPages, 10) * this.numberOfPages + 1, //calculates the start page.
				output = [],
				i = 0,
				counter = 0;

			pageStart = pageStart < 1 ? 1 : pageStart; //檢查頁面的開始範圍，看它是否小於1。

			for(i = pageStart, counter = 0; counter < this.numberOfPages && i <= totalPages; i = i + 1, counter = counter + 1) { //填寫頁面
				output.push(i);
			}

			output.first = 1; //在當前頁面離開第一頁時新增first

			if(this.currentPage > 1) { // 在當前頁面離開第一頁時新增prev
				output.prev = this.currentPage - 1;
			} else {
				output.prev = 1;
			}

			if(this.currentPage < totalPages) { // 當前頁不是最後一頁時新增next
				output.next = this.currentPage + 1;
			} else {
				output.next = totalPages;
			}
			output.last = totalPages; // 在當前頁面沒有達到最後一頁時新增last
			output.current = this.currentPage; //標記當前頁面
			output.total = totalPages;
			output.numberOfPages = this.options.numberOfPages;
			return output;
		},

		/**
		 * 從選項中獲取值，這是為了處理其中value是函式的返回值的情況。
		 *
		 * @return 混合值取決於引數的型別，如果給定引數是函式，則返回評估結果。 否則引數本身將返回。
		 * */
		getValueFromOption: function(value) {
			var output = null,
				args = Array.prototype.slice.call(arguments, 1);
			if(typeof value === 'function') {
				output = value.apply(this, args);
			} else {
				output = value;
			}
			return output;
		}
	};
	old = $.fn.bootstrapPaginator;
	$.fn.bootstrapPaginator = function(option) {
		var args = arguments,
			result = null;
		$(this).each(function(index, item) {
			var $this = $(item),
				data = $this.data('bootstrapPaginator'),
				options = (typeof option !== 'object') ? null : option;

			if(!data) {
				data = new BootstrapPaginator(this, options);

				$this = $(data.$element);

				$this.data('bootstrapPaginator', data);

				return;
			}

			if(typeof option === 'string') {

				if(data[option]) {
					result = data[option].apply(data, Array.prototype.slice.call(args, 1));
				} else {
					throw "Method " + option + " does not exist";
				}

			} else {
				result = data.setOptions(option);
			}
		});
		return result;
	};

	$.fn.bootstrapPaginator.sizeArray = {
		"2": {
			"large": "pagination-large",
			"small": "pagination-small",
			"mini": "pagination-mini"
		},
		"3": {
			"large": "pagination-lg",
			"small": "pagination-sm",
			"mini": ""
		}
	};

	$.fn.bootstrapPaginator.defaults = {
		containerClass: "",
		size: "normal",
		alignment: "left",
		bootstrapMajorVersion: 2,
		listContainerClass: "",
		itemContainerClass: function(type, page, current) {
			return(page === current) ? "active" : "";
		},
		itemContentClass: function(type, page, current) {
			return "";
		},
		currentPage: 1,
		numberOfPages: 5,
		totalPages: 1,
		pageUrl: function(type, page, current) {
			return null;
		},
		onPageClicked: null,
		onPageChanged: null,
		useBootstrapTooltip: false,
		shouldShowPage: function(type, page, current) {
			var result = true;
			switch(type) {
				case "first":
					result = (current !== 1);
					break;
				case "prev":
					result = (current !== 1);
					break;
				case "next":
					result = (current !== this.totalPages);
					break;
				case "last":
					result = (current !== this.totalPages);
					break;
				case "page":
					result = true;
					break;
			}
			return result;
		},
		itemTexts: function(type, page, current) {
			switch(type) {
				case "first":
					return "首頁";
				case "prev":
					return "上一頁";
				case "next":
					return "下一頁";
				case "last":
					return "末頁";
				case "page":
					return page;
			}
		},
		tooltipTitles: function(type, page, current) {
			switch(type) {
				case "first":
					return "首頁";
				case "prev":
					return "上一頁";
				case "next":
					return "下一頁";
				case "last":
					return "末頁";
				case "page":
					return(page === current) ? "當前是第" + page + "頁" : "第" + page + "頁";
			}
		},
		bootstrapTooltipOptions: {
			animation: true,
			html: true,
			placement: 'top',
			selector: false,
			title: "",
			container: false
		}
	};
	$.fn.bootstrapPaginator.Constructor = BootstrapPaginator;
}(window.jQuery));

響應式前端框架Bootstrap系列（11）分頁

分頁功能已經封裝成一個獨立的js檔案，也是用bs完成的，名稱為bootstrap-paginator.js。使用前先匯入檔案： <script src="../libs/bootstrap/3.3.7/bootstrap-paginator.js"><

響應式前端框架Bootstrap系列（6）下拉列選單

下拉列選單，是以列表格式顯示連結的上下文選單。下拉列選單選擇後，是開啟超連結的新頁面，此處要清楚與上篇中選擇框的區別。下拉列選單可以單獨使用，但更多的配合導航欄使用。下面是下拉列選單用到的幾種樣式： .dropdown：指定下拉選單整體樣式，下拉選單都包裹在 .dropdo

響應式前端框架Bootstrap系列（16）模態框（Modal）外掛

模態框是bs框架的外掛之一，之所以稱為外掛，是因為它有這自己的一套API，可以通過API提供的介面實現對模態框的控制。只要是bs框架外掛，都支援以下幾個共同的屬性： data-toggle屬性：表示點選或連結時觸發的事件。 data-target屬性：表示點選或連結時觸發

ABP入門系列（7）——分頁實現

完成了任務清單的增刪改查，咱們來講一講必不可少的的分頁功能。首先很慶幸ABP已經幫我們封裝了分頁實現，實在是貼心啊。來來來，這一節咱們就來捋一捋如何使用ABP的進行分頁吧。一、分頁請求DTO定義資料傳輸物件(Data Transfer Objects)用於應用層和展現層的資料傳輸。展現層傳入資料

基於Metronic的Bootstrap開發框架經驗總結（11）--頁面選單的幾種呈現方式

在常規的後臺管理系統或者前端介面中，一般都有一個導航選單提供給使用者，方便選擇所需的內容。基於Metronic的Bootstrap開發框架，是整合了Metroinc樣式，以及Boostrap元件模組的內容，因此選單的效果自然也是和Bootstrap一脈相承的。基於經常使用的幾種選單樣式，本文進行了相關的介紹和

【開源】OSharp框架學習系列（1）：總體設計及系列導航

正是 html 組織內聚性權限是什麽 enc 3-0 分發 OSharp是什麽？　　OSharp是個快速開發框架，但不是一個大而全的包羅萬象的框架，嚴格的說，OSharp中什麽都沒有實現。與其他大而全的框架最大的不同點，就是OSharp只做抽象封裝，不做實現。依賴註

解讀ASP.NET 5 & MVC6系列（11）：Routing路由

新版Routing功能介紹在ASP.NET 5和MVC6中，Routing功能被全部重寫了，雖然用法有些類似，但和之前的Routing原理完全不太一樣了，該Routing框架不僅可以支援MVC和Web API，還支援一般的ASP.NET5程式。新版的改變有如下幾個部分。首先，Routing系統是基於ASP

SpringMVC學習系列（11）之表單標籤

本篇我們來學習Spring MVC表單標籤的使用，藉助於Spring MVC提供的表單標籤可以讓我們在檢視上展示WebModel中的資料更加輕鬆。一.首先我們先做一個簡單了例子來對Spring MVC表單表單標籤的使用有一個大致的印象，然後再結合例子對各個標籤介紹一下如何使用。 1.首先，在com.de

基於MVC4+EasyUI的Web開發框架經驗總結（11）--使用Bundles處理簡化頁面程式碼

在Web開發的時候，我們很多時候，需要引用很多CSS檔案、JS檔案，隨著使用更多的外掛或者獨立樣式檔案，可能我們的Web介面程式碼會越來越臃腫，看起來也很累贅，在MVC裡面提供了一個Bundle的物件，用來簡化頁面程式碼非常方便，本文主要介紹在我的MVC框架裡面，如何使用bundles來簡化頁面的程式碼的。

ABP入門系列（11）——編寫單元測試

1. 前言 In computer programming, unit testing is a software testing method by which individual units of source code, sets of one or more computer program

設計模式系列（11）抽象工廠模式

1.概念抽象工廠模式是所有形態的工廠模式中最為抽象最為一般性的。抽象工廠模式可以向客戶端提供一個介面，使得客戶端在不必指定產品具體型別的情況下，能夠建立多個產品族的產品物件。備註：工廠模式要麼

前端框架Amaze UI（1）概述

Amaze UI採用國際最前沿的“元件式開發”以及“移動優先”的設計理念，基於其豐富的元件，開發者可通過簡單拼裝即可快速構建出HTML5網頁應用，Amaze UI就成為了國內最流行的前端框架。 Amaze UI 的開發歷程追根溯源才能把事情做到極致！

前端知識點整理系列（一）—— Ajax

準備找實習了，打算對前端的基礎知識點做一些整理，做為找實習前的準備，這將會是一個系列的文章總結。今天，我們來談談Ajax。首先來看看Ajax的全稱是什麼？ AJAX = Asynchr

Html5+Mui前端框架,開發記錄（三）：七牛雲上傳圖片

html btn group table 生效 () label container 指定 1.Html界面： 1 <div id="container"> 2 <label>憑證：</label> 3

Jmeter系列（11）- 併發執行緒組Concurrency Thread Group詳解

如果你想從頭學習Jmeter，可以看看這個系列的文章哦 https://www.cnblogs.com/poloyy/category/1746599.html Concurrency Thread Group的介紹 Concurrency Thread Group提供了用於配置多個執行緒計劃

深入理解Java併發框架AQS系列（三）：獨佔鎖（Exclusive Lock）

[深入理解Java併發框架AQS系列（一）：執行緒](https://www.cnblogs.com/xijiu/p/14396061.html) [深入理解Java併發框架AQS系列（二）：AQS框架簡介及鎖概念](https://www.cnblogs.com/xijiu/p/14522224.html)

淘淘商城系列（五）—— 首頁輪播圖展示（一）

首頁輪播圖展示 taotao-portal-web工程中，動態展示內容資訊。前端團隊：負責JS，html等開發。後端團隊：負責後臺的開發並提供資料給前端。 1、功能分析只需要動態生成一個json資料，輪播圖就可以動態展示： taotao-portal

SpringBoot系列（八）分分鐘學會Springboot多種解決跨域方式

SpringBoot系列(八) 分分鐘學會SpringBoot多種跨域解決方式往期推薦 SpringBoot系列（一）idea新建Springboot專案 SpringBoot系列（二）入門知識 springBoot系列（三）配置檔案詳解 SpringBoot系列（四）web靜態資源配置詳解 SpringB

DML語句（八） -- 分頁查詢

索引 off limit offset dml語句 IT rom 開始 page 一、應用場景當要查詢的條目數太多，一頁顯示不全二、語法　　SELECT 查詢列表　　FROM 表　　LIMIT 【offset，】size 註意：　　offset 代表的是起始的條

DataTables的伺服器端（SpringMVC）分頁模式

Datatables是一款jquery表格外掛。它是一個高度靈活的工具，可以將任何HTML表格新增高階的互動功能。分頁，即時搜尋和排序幾乎支援任何資料來源：DOM， javascript， Ajax 和伺服器處理支援不同主題 DataTables, jQuery UI, Bo

響應式前端框架Bootstrap系列（11）分頁

相關推薦