twbs-pagination分页插件的简单应用

1、介绍
jQuery Pagination Plugin for Bootstrap 这个 jQuery 插件简化了 Bootstrap 分页功能的使用。它使用适当的类：.pagination, .active 和 .disabled。下载地址

最简单的demo :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/static/assets/vendors/bootstrap/css/bootstrap.css">

</head>
<body>
    <ul id="pagination-demo" class="pagination-sm"></ul>
    <script src="/static/assets/vendors/jquery/jquery.js"></script>
    <script src="/static/assets/vendors/twbs-pagination/jquery.twbsPagination.js"></script>
    <script>
        $('#pagination-demo').twbsPagination({
        totalPages: 35,
        visiblePages: 7,
        onPageClick: function (event, page) {
            $('#page-content').text('Page ' + page);
        }
    });
    </script>
</body>
</html>

显示效果

在这里插入图片描述

2、借助AJAX请求时使用

界面上：

<ul class="pagination pagination-sm pull-right"> </ul>

引入：

<script src="/static/assets/vendors/jquery/jquery.js"></script>
<script src="/static/assets/vendors/bootstrap/js/bootstrap.js"></script>
<!--插件引入-->
<script src="/static/assets/vendors/twbs-pagination/jquery.twbsPagination.js">

调用：

//发送AJAX请求 获取列表所需数据
function loadPageData(page){
   $.getJSON('/admin/api/comments.php',{page:page},function(data){
     $('.pagination').twbsPagination({
       first:'&laquo',//第一页
       last:'&raquo',//最后一页
       prev:'&lt',//上一页
       next:'&gt',//下一页
       totalPages:data.total_pages,//总页数
       visiblePages:5,//每页显示条数
        //去除第一次初始化时就被触发一次
       initiateStartPageClick:false,
       onPageClick:function(e,page){
         loadPageData(page)
       }
     })
     //data=> {total_pages:7,comments:[]}
     var html=$('#comments_tmpl').render({comments:data.comments})
     $('tbody').html(html)
   })
 }
//获取第一页数据
loadPageData(1)

效果图：

在这里插入图片描述

3、如果需要支持动态数据变化时，需要调用destroy方法

简单demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/static/assets/vendors/bootstrap/css/bootstrap.css">

</head>
<body>
    <ul id="pagination-demo" class="pagination-sm"></ul>
    <script src="/static/assets/vendors/jquery/jquery.js"></script>
    <script src="/static/assets/vendors/twbs-pagination/jquery.twbsPagination.js"></script>
    <script>
        var $pagination= $('#pagination-demo')
        function pagination(totalPages){
            //先销毁之前的调用
            $pagination.twbsPagination('destroy')
            $pagination.twbsPagination({
                totalPages: totalPages,
                visiblePages: 7,
                onPageClick: function (event, page) {
                    $('#page-content').text('Page ' + page);
                }
            });                    
        }
       	//可以开始调用pagination(totalPages)方法了
       //pagination(30)
    </script>
</body>
</html>

需要ajax请求的demo

 	//初始化当前页码
    var currentPage=1

    function loadPageData(page){
      $('tbody').fadeOut()
      $.getJSON('/admin/api/comments.php',{page: page},function(data){
        if(page>data.total_pages){
          loadPageData(data.total_pages)
          return
        }
        $('.pagination').twbsPagination('destroy')
        $('.pagination').twbsPagination({
          first:'&laquo',//第一页
          last:'&raquo',//最后一页
          prev:'&lt',
          next:'&gt',
          //开始页码，防止初始化之后，页码跳回第一页
          startPage: page,
          totalPages: data.total_pages,
          visiblePages:5,
          initiateStartPageClick:false,
          onPageClick:function(e,page){
            loadPageData(page)
          }
        })
        //渲染数据
        var html=$('#comments_tmpl').render({comments:data.comments})
        $('tbody').html(html).fadeIn()

        //每次加载完数据后，记录当前页码
        currentPage=page
      })
    }
	//可以开始调用loadPageData(currentPage)了
    loadPageData(currentPage)

NULL->NULL

发布了43 篇原创文章 · 获赞 1 · 访问量 3124

私信关注

twbs-pagination分页插件的简单应用

猜你喜欢