Examples to explain the two ways to use the bootstrap paginator paging plug-in-JS Tutorial-php.cn

Examples to explain the two ways to use the bootstrap paginator paging plug-in

PHPz

Release： 2018-10-13 17:34:48

Original

9047 people have browsed it

We know that Bootstrap Paginator is a js paging plug-in based on Bootstrap, but it can be used in more than one way. This article mainly introduces two ways of using the bootstrap paginator paging plug-in. Let’s take a look together. I hope it can help. Everyone.

【Related video recommendation: Bootstrap tutorial】

There are two ways to paginate:

1. Front-end paging: ajax Get all the data in one request, suitable for a small amount 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

Have you learned it? Hurry up and give it a try.

Related recommendations:

Share a jq paging plug-in

Bootstrap Paginator paging plug-in is combined with ajax to achieve dynamic no refresh Paging effect

How to transform a Jquery paging plug-in (server-side paging)_jquery

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