bootstrap-paginator 个性化分页插件使用

本文主要是介绍bootstrap-paginator 个性化分页插件使用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1. $.fn.bootstrapPaginator.Constructor = BootstrapPaginator
   我们在看JS插件的时候经常看到这样的，这个其实就是将这个类的放值在我们的JQuery的全局空间里面去。

var BootstrapPaginator = function (element, options) {this.init(element, options)}

我们书写的时候基本上都是选择元素id之后再执行函数就好了….. 一直搞不懂，没有自己写过插件~~太菜

 $('#pagination').bootstrapPaginator(options);

我使用浏览器进入进来的时候，发现了

$ 中的变量的值，传入到了我们的elements中去了,options中的值，是我们配置的信息的！这个传递参数，估计是JQuery内部定好的信息把！这个可是我们如果想写插件的第一步。

1. 我们进入的过程
   这里调用我们的够造函数，进入之前我们看到的够造函数的信息。这里我们可以看到我们的Js之中的原型模式，节约空间，复用内存！进入

 $('#pagination').bootstrapPaginator(options);

之前看过的高级程序设计JavaScript中有过这些的介绍，里面讲的非常的丰富，一本非常好的教程，需要细细的品味

BootstrapPaginator.prototype ={这里就是我们的原型方法，使用对象的Init方法进行初始化工作
}

1. 这里使用了一个插件中经常使用的方法，我们还是有必要知道一下

extend 方法进行一些默认函数配置的配置，有些进行一些简单的替换一下而已！

extend(dest,src1,src2,src3...); 将src1 src2 src3 
它的含义是将src1,src2,src3...合并到dest中,返回值为合并后的dest,由此可以看出该方法合并后，是修改了dest的结构的。如果想要得到合并的结果却又不想修改dest的结构，可以如下使用：
var newSrc=$.extend({},src1,src2,src3...)
//也就是将"{}"作为dest参数。二、省略dest参数
$.extend(src)
该方法就是将src合并到jquery的全局对象中去，如：
$.extend({hello:function(){alert('hello');}});就是将hello方法合并到jquery的全局对象中。这是在jquery全局对象中扩展一个net命名空间。
$.extend($.net,{hello:function(){alert('hello');}})三、Jquery的extend方法还有一个重载原型：  
extend(boolean,dest,src1,src2,src3...)
第一个参数boolean代表是否进行深度拷贝，其余参数和前面介绍的一致，什么叫深层拷贝，我们看一个例子：
var result=$.extend( true,  {},  { name: "John", location: {city: "Boston",county:"USA"} },  { last: "Resig", location: {state: "MA",county:"China"} } ); 
我们可以看出src1中嵌套子对象location:{city:"Boston"},src2中也嵌套子对象location:{state:"MA"},第一个深度拷贝参数为true，那么合并后的结果就是： 
result={name:"John",last:"Resig",location:{city:"Boston",state:"MA",county:"China"}}也就是说它会将src中的嵌套子对象也进行合并，而如果第一个参数boolean为false，我们看看合并的结果是什么，如下：
result={name:"John",last:"Resig",location:{state:"MA",county:"China"}}
也就是说，只要后面的location不会空就直接的覆盖了，不管内部的信息是怎么样处理的！http://www.cnblogs.com/RascallySnake/archive/2010/05/07/1729563.html 参考网址!

看看我们的插件中的调用更是厉害，不但设置了基本的配置信息，而且还对页面进行了渲染之内的工作

 this.options = $.extend({},this.options ||$.fn.bootstrapPaginator.defaults, options),this.totalPages = parseInt(this.options.totalPages, 10),this.numberOfPages = parseInt(this.options.numberOfPages, 10),options &&"undefined" != typeof options.currentPage&&this.setCurrentPage(options.currentPage),this.listen(),this.render(),this.initialized || this.lastPage === this.currentPage||this.$element.trigger("page-changed", [this.lastPage, this.currentPage])},

init方法初始化，构造函数当即执行该方法，该方法内部调用setOptions调用配置项；
setOptions设置配置项，调用listen方法绑定事件、render方法渲染页面；

下面的这个是默认的配置，我们可以去覆盖这些属性！

$.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: !1,shouldShowPage: function (type, page, current) {var result = !0;switch (type) {case"first":result = 1 !== current;break;case"prev":result = 1 !== current;break;case"next":result = current !== this.totalPages;break;case"last":result = current !== this.totalPages;break;case"page":result = !0}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}}

http://www.frontopen.com/846.html 这里有$.trigger 模拟点击事件，然后还可以传递参数，这个是它的优势所在！
这里初始化完了这个页面，我们就要模拟一下点击了第一个界面的效果是什么涩~！

1. 我们再看看监听事件是怎么做的，做了什么？

off() 方法通常用于移除通过 on() 方法添加的事件处理程序。
自 jQuery 版本 1.7 起，off() 方法是 unbind()、die() 和 undelegate() 方法的新的替代品。该方法给 API 带来很多便利，我们推荐使用该方法，它简化了 jQuery 代码库。
注意：如需移除指定的事件处理程序，当事件处理程序被添加时，选择器字符串必须匹配 on() 方法传递的参数。
提示：如需添加只运行一次的事件然后移除，请使用 one() 方法。

这个下面我们自己定义了的通过bind绑定的事件内心以及对应的函数，看一下是否外界定义了这样的函数类型，然后删除之前已经存在的函数！

listen: function () {this.$element.off("page-clicked"),this.$element.off("page-changed"),"function" == typeof this.options.onPageClicked&& this.$element.bind("page-clicked", this.options.onPageClicked),"function" == typeof this.options.onPageChanged &&this.$element.on("page-changed", this.options.onPageChanged),this.$element.bind("page-clicked", this.onPageClicked)}

1. 处理完事件的监听，我们开始渲染我们的界面。这里面就比较的复杂了….
   render方法创建包裹元素ul，设置尺寸、对齐方式，调用builPageItem方法判断前一页、后一页、首页、尾页、页码的显示情况，创建对应li及a子元素；
   buildPageItem方法创建li、a子元素，添加li、a的文本内容、提示层，a元素中绑定BootstrapPaginator类的onPageItemClicked方法，以此改变页面样式，或者通过跳链接的方式实现页面内容的切换，替代前后台数据交互；

对于界面上要怎么展示好看，这个得看你怎么去展示了………

<%@ page contentType="text/html; charset=UTF-8"%>
<%@ include file="./common/common.jsp"%>
<script src="<%=baseUrl%>/libs/bootstrap-paginator/bootstrap-paginator.js"></script><div class="container"><ul id="list"></ul><ul id="pagination"></ul>
</div><script>jQuery(document).ready(function() {$.ajax({url: basePath+"/dictionary/findPage",data:{pageSize:2,pageNo:1},type: "Post",success: function (data) {if (data != null) {var Rows = data.data.rows;$("#list").append('<table>');$.each(Rows, function (index, item) { //遍历返回的json$("#list").append('<tr class="col-sm-12">');$("#list").append('<td>' + item.id + '</td>');$("#list").append('<td>' + item.name + '</td>');$("#list").append('<td>备注</td>');$("#list").append('<td>');$("#list").append('<button class="btn btn-warning" onclick="Edit(' + item.Id + ' );">修改</button>');$("#list").append('<button class="btn btn-warning" onclick="Edit(' + item.Id + ' );">删除</button>');$("#list").append('</td>');$("#list").append('</tr>');});$("#list").append('</table>');var pageCount = data.data.totalPage; //取到pageCount的值(把返回数据转成object类型)var currentPage =data.data.page //得到urrentPagevar options = {bootstrapMajorVersion: 3, //版本currentPage: currentPage, //当前页数totalPages: pageCount, //总页数itemTexts: function (type, page, current) {switch (type) {case "first":return "首页";case "prev":return "上一页";case "next":return "下一页";case "last":return "末页";case "page":return page;}},//点击事件，用于通过Ajax来刷新整个list列表onPageClicked: function (event, originalEvent, type, page) {$.ajax({url: basePath+"/dictionary/findPage",type: "Post",data: {pageSize:2,pageNo:page},success: function (dataAll) {alert(111);var rows = dataAll.data.rows;$("#list").html("");if (rows != null) {$.each(rows, function (index, item) { //遍历返回的json$("#list").append('<table width="100%">');$("#list").append('<tr class="col-sm-12" >');$("#list").append('<td>' + item.id + '</td>');$("#list").append('<td>' + item.name + '</td>');$("#list").append('<td>备注</td>');$("#list").append('<td>');$("#list").append('<button class="btn btn-warning" onclick="Edit(' + item.Id + ' );">修改</button>');$("#list").append('<button class="btn btn-warning" onclick="Edit(' + item.Id + ' );">删除</button>');$("#list").append('</td>');$("#list").append('</tr>');$("#list").append('</table>');});}}});}};$('#pagination').bootstrapPaginator(options);}}});});</script>

这篇关于bootstrap-paginator 个性化分页插件使用的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---