響應式前端框架Bootstrap系列(11)分頁
分頁功能已經封裝成一個獨立的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