search

Home  >  Article  >  Web Front-end  >  How to use bootstrap paginator paging plug-in

How to use bootstrap paginator paging plug-in

PHPz
PHPzOriginal
2018-01-19 10:42:112764browse

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 //总页数
   });
  }
 });

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);//处理成功返回的数据
      }
     });
    }
   });

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>

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>

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>

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!

css ajax bootstrap html JS 事件 ul 算法
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Implementation code for synchronous and asynchronous loading of JavaScript filesNext article：Implementation code for synchronous and asynchronous loading of JavaScript files

Related articles

See more