Simple application twbs-pagination pagination plug-in

1. Introduction
jQuery Pagination Plugin for Bootstrap jQuery plugin that simplifies the use of Bootstrap paging function. It uses the appropriate classes: .pagination, .active and .disabled. download link

The simplest 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>

display effect

Here Insert Picture Description

2, by using AJAX request when

The interface:

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

Introduction:

<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">

transfer:

//发送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)

Renderings:

Here Insert Picture Description

3, if you need to support dynamic data changes, you need to call the destroy method

Simple 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>

Need to demo ajax request

 	//初始化当前页码
    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

Published 43 original articles · won praise 1 · views 3124

Private letter concerns

Simple application twbs-pagination pagination plug-in

Guess you like