概述
最近项目中使用到分页组件，出于练习的目的，使用jquery模仿了BootstrapTable的分页效果；
实现
- 计算总页数
总页数 = 数据总条数 / 每页显示的数据条数， 结果向上取整
- 计算数据开始位置、结束位置
开始位置 = （当前页码 - 1）* 当前展示的数据条数 + 1
结束位置 = 当前页码 * 当前展示的数据条数
- 计算当前页码
当点击上一页，当前页码减一，当页码值等于第一页的页码值时，将当前页码置为最后一页的页码值；
当点击下一页，当前页码加一，当页码值等于最后一页的页码值，则将当前页码值置为首页的页码值；
- 根据数据开始位置和结束为止，加载表格当前页的数据
使用Array对象的slice(start，end),方法提取当前需要的表格数据；
即是：
arr.slice(start-1, end)
减1的原因是源数据的索引是从0开始的，而本例中的数据开始位置是从1开始的；
每次改变数据条数的时候，将页码置为1
页码列表展示
根据当前数据条数是否大于等于总数据条数，若大于等于则隐藏，反之显示或者是判断表格数据的长度是否小于等于1，若是则隐藏，反之显示；
代码
HTML
分页组件
item1
item2
item3
显示第0到第0条记录，总共0条记录
每页显示条记录
-
‹
-
›
CSS
下列样式为index.css文件中的样式：
html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
font-family: 'Microsoft YaHei';
}
* {
padding: 0;
margin: 0;
}
ul li {
list-style: none;
}
table {
margin: 10px 0;
width: 100%;
min-height: 500px;
border-collapse: collapse;
border-color: #ccc;
color: #808696;
}
table th,
table tr {
width: calc(100% / 3);
}
table tbody th:nth-child(2n) {
background: #eee;
}
.c-pagination {
display: flex;
width: 100%;
height: 100%;
margin: 10px 0;
height: 54px;
}
.pagination-text {
flex: 1;
display: -webkit-flex;
height: 54px;
line-height: 54px;
padding-left: 5px;
box-sizing: border-box;
}
.pagination-text .page-size {
display: inline-block;
margin-right: 5px;
height: 54px;
line-height: 54px;
font-size: 12px;
}
.pagination-text .page-size span {
display: inline-block;
padding: 0 3px;
font-size: 12px;
font-family: "Microsoft YaHei";
font-family: 'Microsoft YaHei';
color: #333;
}
.pagination-text .page-list {
display: inline-block;
height: 54px;
line-height: 54px;
font-family: 'Microsoft YaHei';
font-size: 12px;
}
.pagination-text .page-list select {
display: inline-block;
background-color: #fff;
border-color: #ccc;
font-size: 12px;
padding: 6px 12px;
margin-top: -10px;
margin-right: 3px;
margin-left: 3px;
color: #808696;
}
.pagination-text .page-list select:hover {
color: #333;
background-color: #e6e6e6;
border-color: #adadad;
}
.pagination-number {
flex: 1;
height: 54px;
line-height: 54px;
vertical-align: middle;
text-align: right;
padding-right: 5px;
box-sizing: border-box;
align-self: flex-end;
}
.pagination-number li {
display: inline-flex;
align-content: center;
}
.pagination-number li span {
display: block;
flex: 1;
font-size: 12px;
position: relative;
font-family: 'Microsoft YaHei';
padding: 6px 12px;
margin-left: -6px;
line-height: 1.42857143;
color: #337ab7;
text-decoration: none;
background-color: #fff;
border: 1px solid #ddd;
cursor: pointer;
}
.pagination-number li:hover span {
background-color: #eee;
border-color: #ddd;
color: #1181D9 !important;
}
.pagination-number li.active span {
border-color: #337ab7;
color: #1181D9 !important;
margin-right: 6px;
}
.pagination-number li.prev span {
margin-left: 0;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.pagination-number li.next span {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
注意： table的样式可以调整
JS
下面的脚本代码为index.js文件的内容：
var pagination = {
// 表体数据
data: data,
// 总条数
total: 0,
// 总页数
totalPages: 0,
// 当前页码
pageNumber: 1,
// 每页数据条数
pageSize: 10,
// 开始数据的位置
start: 1,
// 结束数据的位置
end: 10,
// 可供选择的每页的行数
pageList: [10, 25, 50, 100],
init: function(opt) {
var that = this;
// 计算总条数
that.total = that.data.length;
opt.totalNum.html(that.total);
that.loadPageData(opt, that);
// 计算页数
that.calculateNumberList(opt);
that.showTableData(opt);
opt.startNum.html(that.start);
opt.endNum.html(that.end);
// 改变数据条数
opt.changeList.on('change', function(e) {
var _this = this;
that.pageNumber = 1;
that.changeNumber(that, _this, opt);
});
// 上一页
opt.paginationList.find("li.prev").on('click', function() {
var _this = this;
$(_this).siblings().removeClass('active');
$(_this).removeClass("active");
if (that.pageNumber == 1) {
that.pageNumber = that.totalPages;
} else {
that.pageNumber--;
}
that.loadPageData(opt, that);
var page = opt.paginationList.find("li.page");
for (let i = 0; i < page.length; i++) {
if (i == that.pageNumber - 1) {
$(page[i]).addClass("active");
}
}
that.showTableData(opt);
});
// 下一页
opt.paginationList.find("li.next").on('click', function() {
var _this = this;
$(_this).siblings('li').removeClass("active");
$(_this).removeClass("active");
if (that.pageNumber == that.totalPages) {
that.pageNumber = 1;
} else {
that.pageNumber++;
}
that.loadPageData(opt, that);
var page = opt.paginationList.find("li.page");
for (let i = 0; i < page.length; i++) {
if (i == that.pageNumber - 1) {
$(page[i]).addClass("active");
}
}
that.showTableData(opt);
});
},
// 改变开始位置，结束位置
loadPageData: function(opt, that) {
that.start = (that.pageNumber - 1) * that.pageSize + 1;
that.end = that.pageNumber * that.pageSize;
if (that.end > that.total) {
that.end = that.total;
}
opt.startNum.html(that.start);
opt.endNum.html(that.end);
},
// 计算页码数量
calculateNumberList: function(opt) {
var that = this;
// 计算总的页数 = 数据总条数 / 每页显示的条数
that.totalPages = Math.ceil(that.total / that.pageSize);
// 创建页数标签
opt.paginationList.find("li.page").remove();
if (that.pageSize >= that.total || that.data.length <= 1) {
opt.paginationList.hide();
} else {
opt.paginationList.show();
for (let i = 0; i < that.totalPages; i++) {
opt.next.before("" + parseInt(i + 1) + " ");
}
opt.paginationList
.find("li:nth-child(2)")
.addClass("active");
}
// 点击页码改变数据
opt.paginationList.find("li.page").on("click", function() {
var _this = this;
var _this = this;
$(_this)
.siblings()
.removeClass("active");
$(_this).addClass("active");
that.pageNumber = parseInt(
$(_this)
.find("span")
.text()
);
that.loadPageData(opt, that);
that.showTableData(opt);
});
},
// 展示表格数据
showTableData: function(opt) {
var arr = [],
that = this,
len;
arr = that.data.slice(that.start - 1, that.end);
that.initTable(opt, arr);
},
initTable(opt, arr) {
opt.table
.find("tbody")
.find("tr")
.remove();
arr.forEach(function(item, index) {
var oTr = $("" + item[key] + " ");
}
opt.table.find("tbody").append(oTr);
});
},
changeNumber: function(that, target, opt) {
that.pageSize = parseInt($(target)
.find("option:selected")
.text());
if (that.pageSize >= that.total) {
that.pageSize = that.total
that.start = 1;
that.pageNumber = 1
}
that.loadPageData(opt, that);
that.calculateNumberList(opt);
that.showTableData(opt);
}
};
window.onload = function() {
var option = {
startNum: $(".start-num"),
endNum: $(".end-num"),
totalNum: $(".total"),
changeList: $("#changeNumber"),
paginationList: $("#paginationList"),
prev: $(".prev"),
next: $(".next"),
table: $('#table')
};
pagination.init(option);
};
数据
案例数据如下：
var data = [{
item1: 1,
item2: 3,
item3: 4
},
{
item1: 4,
item2: 5,
item3: 6
},
{
item1: 7,
item2: 8,
item3: 9
},
{
item1: 10,
item2: 11,
item3: 12
},
{
item1: 13,
item2: 14,
item3: 15
},
{
item1: 16,
item2: 17,
item3: 18
},
{
item1: 19,
item2: 20,
item3: 21
},
{
item1: 22,
item2: 23,
item3: 24
},
{
item1: 25,
item2: 26,
item3: 27
},
{
item1: 27,
item2: 29,
item3: 30
},
{
item1: 31,
item2: 32,
item3: 33
},
{
item1: 34,
item2: 35,
item3: 36
},
{
item1: 37,
item2: 38,
item3: 39
},
{
item1: 40,
item2: 41,
item3: 42
},
{
item1: 43,
item2: 44,
item3: 45
},
{
item1: 46,
item2: 47,
item3: 48
},
{
item1: 49,
item2: 50,
item3: 51
},
{
item1: 52,
item2: 53,
item3: 54
},
{
item1: 55,
item2: 56,
item3: 57
},
{
item1: 58,
item2: 59,
item3: 60
},
{
item1: 61,
item2: 62,
item3: 63
},
{
item1: 64,
item2: 65,
item3: 66
},
{
item1: 67,
item2: 68,
item3: 69
},
{
item1: 7,
item2: 8,
item3: 9
},
{
item1: 1,
item2: 3,
item3: 4
},
{
item1: 4,
item2: 5,
item3: 6
},
{
item1: 7,
item2: 8,
item3: 9
},
{
item1: 1,
item2: 3,
item3: 4
},
{
item1: 4,
item2: 5,
item3: 6
},
{
item1: 7,
item2: 8,
item3: 9
},
{
item1: 1,
item2: 3,
item3: 4
},
{
item1: 4,
item2: 5,
item3: 6
},
{
item1: 7,
item2: 8,
item3: 9
},
{
item1: 1,
item2: 3,
item3: 4
},
{
item1: 4,
item2: 5,
item3: 6
},
{
item1: 7,
item2: 8,
item3: 9
}
];
效果
pagination.GIF