bootstrap分页插件php,bootstrap paginator分页插件使用方法

Bootstrap Paginator是一款基于Bootstrap的js分页插件，本文主要给大家介绍bootstrap paginator分页插件的两种使用方式，一起看看吧，希望能帮助到大家。

分页有两种方式：

1. 前台分页：ajax一次请求获取全部数据，适合少量数据(万条数据以下)；$.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 //总页数

});

}

});

注意：1. bootstrap3中分页的HTML部分要求使用ul标签；2. 前台写分页算法。

2. 后台分页：发送多次ajax，每次获取指定页数的数据(万条数据以上)。$('#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);//处理成功返回的数据

}

});

}

});

注意：1. bootstrap3中分页的HTML部分要求使用ul标签；2. 后台写分页算法。

ps：下面看下bootstrap-paginator 分页控件的使用

首先对js和css的引用

初始化分页控件

$(function(){

var options={

bootstrapMajorVersion:1, //版本

currentPage:1, //当前页数

numberOfPages:5, //最多显示Page页

totalPages:10, //所有数据可以显示的页数

onPageClicked:function(e,originalEvent,type,page){

}

}

$("#page").bootstrapPaginator(options);

})

如果bootstrapMajorVersion:1 时，则上面的分页标签用 p

如果bootstrapMajorVersion:3 时，则上面的分页标签用 ul

其中：currentPage 是当前你所在的页数　　numberOfPages 是分页按钮可见的最多数　　totalPages 是所有数据能分的页数(这些 options(选项)是在初始化分页控件的时候使用的。)

在onPageClicked 事件中 page 参数标识你点击页数时所在的页数。

完整代码如下：

$(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);

})

相关推荐：