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

最新推荐文章于 2021-03-23 04:31:29 发布

汪小哥

最新推荐文章于 2021-03-23 04:31:29 发布

阅读量6.8k

点赞数

分类专栏： JS 文章标签：分页插件

本文链接：https://blog.csdn.net/u012881904/article/details/52966065

版权

JS 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

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

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

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

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

我使用浏览器进入进来的时候，发现了
这里写图片描述
$ 中的变量的值，传入到了我们的elements中去了,options中的值，是我们配置的信息的！这个传递参数，估计是JQuery内部定好的信息把！这个可是我们如果想写插件的第一步。

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

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

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

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

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

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 "&lt;&lt;";
                case"prev":
                    return "&lt;";
                case"next":
                    return "&gt;";
                case"last":
                    return "&gt;&gt;";
                case"page":
                    return page
            }
        }

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

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

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)
        }

处理完事件的监听，我们开始渲染我们的界面。这里面就比较的复杂了….
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 //得到urrentPage
          var 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>

汪小哥

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
bootstrap-paginator 个性化分页插件使用

$.fn.bootstrapPaginator.Constructor = BootstrapPaginator 我们在看JS插件的时候经常看到这样的，这个其实就是将这个类的放值在我们的JQuery的全局空间里面去。var BootstrapPaginator = function (element, options) { this.init(element, options)
复制链接

扫一扫