Web前端

基于bootstrap的分页插件

2018-08-31  本文已影响51人  HELLO_浪

导入一些css、js

<link href="/static/css/bootstrap.min.css" rel="stylesheet">
<script src="/static/js/jquery-2.1.1.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
<script src="/static/js/bootstrap-paginator.js"></script>

注意:js的导入顺序,jquery优先导入并且版本要2.x。中文乱码:<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
其中:bootstrap-paginator.js下载的地址:https://github.com/lyonlai/bootstrap-paginator 在GitHub上进行下载。

html代码:

<div id="example" style="text-align: center"> <ul id="pageLimit"></ul> </div>

<script>
$('#pageLimit').bootstrapPaginator({
 currentPage: 1,//当前页。
 totalPages: 20,//总页数。
 size:"normal",//应该是页眉的大小。
 bootstrapMajorVersion: 3,//bootstrap的版本要求。
 alignment:"right",
 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;
        }
    },
  onPageClicked: function (event, originalEvent, type, page) {//给每个页眉绑定一个事件,其实就是ajax请求,其中page变量为当前点击的页上的数字。
            $.ajax({
                url:'',
                 type:'',
                 data:{},
                 dataType:'JSON',
                 success:function (callback) {
                        
                 }
             })
        }
 });
</script>
上一篇下一篇

猜你喜欢

热点阅读