How to use bootstrap paginator paging plug-in-JS Tutorial-php.cn

How to use bootstrap paginator paging plug-in

PHPz

Release： 2018-10-16 16:50:56

Original

2769 people have browsed it

Bootstrap Paginator is a js paging plug-in based on Bootstrap. This article mainly introduces two ways to use the bootstrap paginator paging plug-in. Let’s take a look. I hope it can help you.

【Related video recommendation: Bootstrap tutorial】

There are two ways to paginate:

1. Front desk Pagination: Ajax obtains all data in one request, suitable for small amounts of data (less than 10,000 pieces of data);

$.ajax({
  type: "GET",
  url: "",//后台接口地址
  dataType: "json",
  success: function (msg) {
   var pages = Math.ceil(msg.data / 5);//data是数据总量 
   var element = $('#id');//对应ul的id
   element.bootstrapPaginator({
    bootstrapMajorVersion: 3,//bootstrap版本
    currentPage: page,//当前页面 
    numberOfPages: 5,//一页显示几个按钮（在ul里面生成5个li） 
    totalPages: pages //总页数
   });
  }
 });

Copy after login

Note: 1. The HTML part of paging in bootstrap3 requires the use of ul tags; 2. Write the paging algorithm at the front desk.

2. Background paging: Send ajax multiple times, and obtain a specified number of pages of data each time (more than 10,000 pieces of data).

$('#id').bootstrapPaginator({
    bootstrapMajorVersion: 3,//bootstrap版本
    currentPage: 1,//当前页码
    totalPages: data.cn,//总页数（后台传过来的数据）
    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({
      url: '../../interface/xw_zxdt_list.php',
      type: 'post',
      data: {page: page},
      dataType: 'json',
      success: function (data) {
       tplData(data);//处理成功返回的数据
      }
     });
    }
   });

Copy after login

Note: 1. The HTML part of paging in bootstrap3 requires the use of ul tags; 2. The paging algorithm is written in the background.

ps: Let’s take a look at the use of bootstrap-paginator paging control

First reference to js and css

<link rel="stylesheet" href="reference/bootstrap/css/bootstrap.min.css"/> 
<script type="text/javascript" src="reference/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="reference/bootstrap-paginator.js"></script>

Copy after login

Initialize the paging control

　<p id="page"></p>
　　<script type="text/javascript">
  $(function(){
   var options={
    bootstrapMajorVersion:1, //版本
    currentPage:1, //当前页数
    numberOfPages:5, //最多显示Page页
    totalPages:10, //所有数据可以显示的页数
    onPageClicked:function(e,originalEvent,type,page){
    }
   }
   $("#page").bootstrapPaginator(options);
  })
 </script>

Copy after login

If bootstrapMajorVersion :1, then the paging tag above is p

If bootstrapMajorVersion:3, the paging tag above is ul

where: currentPage is the number of pages you are currently on and numberOfPages is the paging button The maximum number of visible totalPages is the number of pages that all data can be divided into (these options (options) are used when initializing the paging control.)

In the onPageClicked event, the page parameter identifies the page where you clicked Number of pages.

The complete code is as follows:

<!DOCTYPE HTML>
<html>
<head>
 <meta charset="utf-8"/>
 <link rel="stylesheet" href="reference/bootstrap/css/bootstrap.min.css"/> 
 <script type="text/javascript" src="reference/jquery-2.0.3.min.js"></script>
 <script type="text/javascript" src="reference/bootstrap-paginator.js"></script>
</head>
<body>
 <p id="page"></p>
 <script type="text/javascript">
  $(function(){
   var options={
    bootstrapMajorVersion:1, //版本
    currentPage:1, //当前页数
    numberOfPages:5, //最多显示Page页
    totalPages:10, //所有数据可以显示的页数
    onPageClicked:function(e,originalEvent,type,page){
     console.log("e");
     console.log(e);
     console.log("originalEvent");
     console.log(originalEvent);
     console.log("type");
     console.log(type);
     console.log("page");
     console.log(page);
    }
   }
   $("#page").bootstrapPaginator(options);
  })
 </script>
</body>
</html>

Copy after login

Related recommendations:

twbsPagination.js paging plug-in usage sharing

thinkPHP5 usage The laypage paging plug-in implements the list paging function_php example

detailed introduction to the use of twbsPagination.js paging plug-in

The above is the detailed content of How to use bootstrap paginator paging plug-in. For more information, please follow other related articles on the PHP Chinese website!