美文网首页Web前端
基于bootstrap的分页插件

基于bootstrap的分页插件

作者: HELLO_浪 | 来源:发表于2018-08-31 17:16 被阅读51次

    导入一些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>
    

    相关文章

      网友评论

        本文标题:基于bootstrap的分页插件

        本文链接:https://www.haomeiwen.com/subject/nqcewftx.html