jq分页器插件jqPaginator

先引入bootstrap.min.css、jquery.min.js、jq-paginator.min.js

<link type="text/css" rel="stylesheet" href="http://cdn.staticfile.org/twitter-bootstrap/3.1.1/css/bootstrap.min.css" />  
<script type="text/javascript" src="https://cdn.staticfile.org/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="./jq-paginator.min.js"></script>

demo：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>jqPaginator</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link type="text/css" rel="stylesheet" href="http://cdn.staticfile.org/twitter-bootstrap/3.1.1/css/bootstrap.min.css" />  
    <script type="text/javascript" src="https://cdn.staticfile.org/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript" src="./jq-paginator.min.js"></script>
  </head>

  <body>
    <div id="paginator-contain" class="pagination"></div>
    <script type="text/javascript">
      //初始化分页器
      var Total = 326;
      var pageSize = 10;
      var page = 2;
      $('#paginator-contain').jqPaginator({
    
    
          totalPages: Math.ceil(Total / pageSize) || 1,
          visiblePages: 7,
          currentPage: page,
          first: '<li class="first"><a href="javascript:void(0);">首页</a></li>',
          prev: '<li class="prev"><a href="javascript:;">上一页</a></li>',
          next: '<li class="next"><a href="javascript:void(0);">下一页</a></li>',
          last: '<li class="last"><a href="javascript:void(0);">尾页</a></li>',
          page: '<li class="page"><a href="javascript:;">{
    
    {page}}</a></li>',
          onPageChange: function (num, type) {
    
    
              console.log(page);
              page = num;
          }
      });
    </script>
  </body>
</html>

效果：

在这里插入图片描述

参考：https://jqpaginator.keenwon.com/
参考的dome：https://gitee.com/Paul_Chan/jq-paginator

jq分页器插件jqPaginator

猜你喜欢