收获：
1.总架构：
首先创建BootstrapPaginator构造函数，prototype赋值方法，实现页面的渲染，通过自调用匿名函数封装BootstrapPaginator类的方法，对外不提供修改及调用接口，onPageClicked方法用来改变页码的显示状况；
再在$.fn.BootstrapPaginator内部new出一个BootstrapPaginator实例，构成jquery插件，默认配置项作为$.fn.BootstrapPaginator的属性存在，包括前后首尾页的显示文本、提示层文本、尺寸对齐等样式状况、以及onPageClicked、onPageChanged方法，onPageClicked修改页面显示状况，onPageChanged用于前后台的数据交互，因为BootstrapPaginator类和$.fn.BootstrapPaginator插件没有继承、相等关系，两个同名的onPageClicked方法也不会起冲突，通过不同的事件绑定分别调用两个同名方法。
2.BootstrapPaginator类的构造：
init方法初始化，构造函数当即执行该方法，该方法内部调用setOptions调用配置项；
setOptions设置配置项，调用listen方法绑定事件、render方法渲染页面；
listen方法绑定BootstrapPaginator类的onPageClicked方法以及$.fn.BootstrapPaginator插件中的onPageClicked、onPageChanged方法；
render方法创建包裹元素ul，设置尺寸、对齐方式，调用builPageItem方法判断前一页、后一页、首页、尾页、页码的显示情况，创建对应li及a子元素；
buildPageItem方法创建li、a子元素，添加li、a的文本内容、提示层，a元素中绑定BootstrapPaginator类的onPageItemClicked方法，以此改变页面样式，或者通过跳链接的方式实现页面内容的切换，替代前后台数据交互；
onPageItemClicked方法通过触发page-clicked事件调用BootstrapPaginator类的onPageClicked方法以及$.fn.BootstrapPaginator插件中的onPageClicked方法
onPageClicked方法通过点击分页区域改变页面样式，调用showFirst、showLast、showNext、showPrev、show方法实现；
showFirst、showLast、showNext、showPrev方法通过调用getPages方法以数组形式记录页码显示状况，调用show方法设置当前页、渲染页面、绑定page-changed事件；
getPages方法以数组形式记录页码的显示状况，并且以数组的属性记录当前页、前一页、后一页、首页、尾页、显示页码的个数，方便调用，以作判断；
show方法设置当前页、调用render方法渲染页面、绑定page-changed事件，触发onPageChanged方法；
getValueFromOption方法，参数的第一项为函数的时候，将参数的其余项传入该函数构造输出，否则直接将参数输出。
getValueFromOption方法、类的设计较有深意。
3.jquery的新认识：
$.on("eventtype",[selector],[data],fn)...selector事件捕获阶段查询的子节点，data是传入event.data中的数据；
$.proxy(fn,content)...fn的作用域改成content，并返回fn；
$("element").on("eventtype",fn)...绑定事件；
$("element").trigger("eventtype",[arguments])触发事件，并传入arguments参数；
$("element").data()...获取或设置元素的data数据，该数据添加到dom元素中不会在元素的属性中显示；
typeof data...自动截取data的第一项作判断；
data.apply(this,arguments)...data的第一项为函数的时候，执行apply方法，改变该函数的作用域，设置传入的参数。
4.插件的使用：
版本为2的时候页面元素只能是div，版本为3的时候只能是ul
onPageClicked用于改变页面样式，onPageChanged实现数据交互
插件提供了跳连接的方式实现页面交互，可通过修改配置项的pageUrl函数
itemTexts函数修改显示文本，tooltipTitles修改提示文本
实例：
html：
<ul id="pagination"></ul>
js：
var options={
currentPage: 1,
totalPages: 25,
numberofPages: 5,
itemTexts: function(type, page, current) {
switch (type) {
case "first":
return "第一页";
case "prev":
return "上一页";
case "next":
return "下一页";
case "last":
return "最后一页";
case "page":
return page;
}
},
onPageChanged: function (event,lastpage, currentpage) {
$.post("",{page:currentpage},function(data) {
});
},
pageUrl: function (type,page, currentpage) {
return "/***.htm?currentpage="+page
}, //跳链接的方式
};
$("#pagination").bootstrapPaginator(options);
5.插件存在的缺点，或者预留的可扩展部分
通过清除包裹元素的样式，再调用containerClass函数的方式添加样式未免多此一举。
余不赘述
6.源码：
(function ($) {
"use strict";
//先创建分页的构造函数，作为公有方法，再将该构造函数通过new方法赋在$.fn.bootstrapPaginator内部形成jquery插件
//默认项在$.fn.bootstrapPaginator.defaults中定义，包含显示前一页的显示文本、是否显示以及提示文字，可修改部分
var BootstrapPaginator = function (element, options) {
this.init(element, options);
},
old = null;
BootstrapPaginator.prototype = {
init: function (element, options) {
this.$element = $(element);
var version = (options && options.bootstrapMajorVersion) ? options.bootstrapMajorVersion : $.fn.bootstrapPaginator.defaults.bootstrapMajorVersion,
id = this.$element.attr("id");
// 版本2中容器元素只能为div，版本3容器元素只能为ul
if (version === 2 && !this.$element.is("div")) {
throw "in Bootstrap version 2 the pagination must be a div element. Or if you are using Bootstrap pagination 3. Please specify it in bootstrapMajorVersion in the option";
} else if (version > 2 && !this.$element.is("ul")) {
throw "in Bootstrap version 3 the pagination root item must be an ul element."
}
this.currentPage = 1;
this.lastPage = 1;
this.setOptions(options);
this.initialized = true;
},
//配置项，绑定事件、渲染页面
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]);
}
},
// 绑定事件监听函数，page-clicked事件触发onPageClicked方法，page-changed事件触发onPageChanged方法
// this.onPageClicked调用paginator类的方法，this.options.onPageClicked调用配置项中的方法
//
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);
},
destroy: function () {
this.$element.off("page-clicked");
this.$element.off("page-changed");
this.$element.removeData('bootstrapPaginator');
this.$element.empty();
},
//根据页码显示状况和当前页进行渲染，trigger触发onPageChanged函数，传入当前页和前一次当前页两个参数
show: function (page) {
this.setCurrentPage(page);
this.render();
if (this.lastPage !== this.currentPage) {
this.$element.trigger("page-changed", [this.lastPage, this.currentPage]);
}
},
//showNext、showPrev、showFirst、showLast页码显示状况
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);
}
},
//通过on方法向onPageItemClicked方法中的event.data传递参数，再通过trigger触发page-clicked事件，调用onPageClicked方法，实现参数传递
//onPageClicked修改页面显示状况，onPageChanged可以用来前后台的数据交互，参数为event，lastpage、currentpage
onPageItemClicked: function (event) {
var type = event.data.type,
page = event.data.page;
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;
}
},
// 根据版本号判断是否添加包裹元素ul，为该ul添加pagination类，设定大小、对齐方式
// 包裹元素根据first、next、prev、last、page类型，通过buildPageItem创建li、a子元素
render: function () {
// 容器元素的类会被清空，需要优先记录，添加完pagination类后再放回
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;
listContainer.prop("class", "");
listContainer.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) {
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);
}
}
},
// 容器元素下插入li子元素，当前页添加active类，首页、前一页、后一页、尾页显示文本、提示框，绑定点击事件
buildPageItem: function (type, page) {
var itemContainer = $("<li></li>"),
itemContent = $("<a></a>"),
text = "",
title = "",
//itemContainerClass记录当前页的激活状态
itemContainerClass = this.options.itemContainerClass(type, page, this.currentPage),
itemContentClass = this.getValueFromOption(this.options.itemContentClass, type, page, this.currentPage),
tooltipOpts = null;
switch (type) {
case "first":
//判断是否显示跳转到首页，根据当前页是否首页进行判断
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":
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":
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":
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);
// a元素中绑定onPageItemClicked事件，并通过on方法以及$.proxy方法传递参数，on方法的第三个参数是给event.data添加的参数
// 分页通过前后端以ajax形式传递数据的方式实现跳转
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));
}
// 提示默认采用浏览器自带提示框，也可以引进bootstrapTooltip插件实现提示框
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 "Page out of range";
}
this.lastPage = this.currentPage;
this.currentPage = parseInt(page, 10);
},
// 数组记录页码显示状况，数组的属性记录当前页，前一页，后一页，首页，尾页，总页数，显示页码数
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;
for (i = pageStart, counter = 0; counter < this.numberOfPages && i <= totalPages; i = i + 1, counter = counter + 1) {//fill the pages
output.push(i);
}
output.first = 1;
if (this.currentPage > 1) {
output.prev = this.currentPage - 1;
} else {
output.prev = 1;
}
if (this.currentPage < totalPages) {
output.next = this.currentPage + 1;
} else {
output.next = totalPages;
}
output.last = totalPages;
output.current = this.currentPage;
output.total = totalPages;
output.numberOfPages = this.options.numberOfPages;
return output;
},
// 配置项中有函数，将参数传入函数输出，无函数直接输出
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;
}
};
//构造jquery插件
old = $.fn.bootstrapPaginator;
$.fn.bootstrapPaginator = function (option) {
var args = arguments,
result = null;
$(this).each(function (index, item) {
var $this = $(item),
data = $this.data('bootstrapPaginator'),//获取元素的data数据，该数据不会在页面上显示，不知何种泳衣？？？
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: 3,
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 "Go to first page";
case "prev":
return "Go to previous page";
case "next":
return "Go to next page";
case "last":
return "Go to last page";
case "page":
return (page === current) ? "Current page is " + page : "Go to page " + page;
}
},
bootstrapTooltipOptions: {
animation: true,
html: true,
placement: 'top',
selector: false,
title: "",
container: false
}
};
$.fn.bootstrapPaginator.Constructor = BootstrapPaginator;
}(window.jQuery));
相关推荐
Bootstrap-Paginator是一个专门针对Bootstrap框架设计的轻量级分页插件，它能够帮助开发者快速、便捷地在网页应用中实现美观且响应式的分页效果。 Bootstrap本身是一个流行的前端开发框架，它提供了一系列预设的CSS...
bootstrap-paginator.js
其他下载地址： https://github.com/lyonlai/bootstrap-paginator
bootstrap-paginator-分页控件。 var options = { bootstrapMajorVersion: 3, currentPage: page, //当前页面 numberOfPages: 9, //一页显示几个按钮（在ul里面生成5个li） totalPages: pages ? pages : 1, //总...
使用简单，还可以自定义空间样式、显示； eg: var options = { currentPage: 3, //当前页 totalPages: 10, //总共页数 //页面切换触发方法 onPageChanged: function...$('#example').bootstrapPaginator(options);
接着，下载或通过CDN引入`bootstrap-paginator.js`文件。你可以将该文件链接到HTML文档的`<head>`或`<body>`的底部，确保在引用jQuery之后。 2. **基本使用** Bootstrap Paginator的使用非常直观。创建一个空的...
在提供的压缩包中，"bootstrap-paginator-分页组件"可能包含了以下内容： 1. CSS文件：存放了分页组件的样式，确保其与Bootstrap主题的兼容。 2. JavaScript文件：包含Bootstrap Paginator的核心逻辑，用于处理分页...
在 "bootstrap-paginator" 中，CSS 文件用于定义分页组件的样式。这些样式可能包括按钮的大小、颜色、边框、间距以及在不同屏幕尺寸下的显示方式等。例如，Bootstrap Paginator 的 CSS 可能会定义 .pagination 类，...
BOOTSTRAP-TABLE是一款基于Bootstrap框架的开源前端数据展示插件，它允许用户在网页上创建功能丰富的表格，包括排序、筛选、分页等。这个源码包包含了官方的最新版本，适合开发者进行二次开发或者深入理解其工作原理...
这个压缩包“bootstrap-paginator.rar”包含了使用该组件所需的CSS样式表和JavaScript文件，以及可能与jQuery和Bootstrap库集成的相关资源。 1. **Bootstrap Paginator 基本概念**： Bootstrap Paginator 是一个轻...
在本项目 "bootstrap-paginator-master.zip" 中，我们关注的是如何结合这两个工具来实现高效的分页功能。 Bootstrap 是一个由 Twitter 开发的前端框架，它提供了丰富的 UI 组件，如导航、按钮、表单、模态框等，...
赠送jar包：swagger-bootstrap-ui-1.9.6.jar； 赠送原API文档：swagger-bootstrap-ui-1.9.6-javadoc.jar； 赠送源代码：swagger-bootstrap-ui-1.9.6-sources.jar； 赠送Maven依赖信息文件：swagger-bootstrap-ui-...
本文介绍的是一种结合了Bootstrap框架和bootstrap-paginator.js插件的异步分页请求实现方式。 ### bootstrap-paginator.js Bootstrap-paginator.js是一个基于Bootstrap的分页组件，它允许开发者以很小的配置实现...
这些文件通常包括Bootstrap的核心库、jQuery、bootstrap-table主文件，以及bootstrap-table-editable.js。确保这些资源被正确地链接或导入到HTML文档的`<head>`部分，以便在页面加载时可以正常使用。 以下是一个...
可编辑bootstrap-table及相关组件：bootstrap3、bootstrap-table相关、bootstrap-table-editable.js、bootstrap-editable.js、bootstrap-editable.css； 配合起来，可以实现可编辑bootstrap-table列表。代码实现： ...
bootstrap-table实现 行拖拽 插件 jquery.tablednd.js bootstrap-table-reorder-rows.js bootstrap-table-reorder-rows.css
在本资源中，我们关注的是`bootstrap-datepicker-1.9.0`，这是一个针对Bootstrap框架的日期选择器插件。这个插件允许用户以美观、易用的方式选择日期，常见于各种表单输入和日历应用。 Bootstrap Datepicker是基于...