概述
最近項目中使用到分頁組件拓诸，出于練習的目的，使用jquery模仿了BootstrapTable的分頁效果每辟；
實現
- 計算總頁數
總頁數 = 數據總條數 / 每頁顯示的數據條數汉规， 結果向上取整
- 計算數據開始位置、結束位置
開始位置 = （當前頁碼 - 1）* 當前展示的數據條數 + 1
結束位置 = 當前頁碼 * 當前展示的數據條數
- 計算當前頁碼
當點擊上一頁屏镊，當前頁碼減一，當頁碼值等于第一頁的頁碼值時痰腮，將當前頁碼置為最后一頁的頁碼值而芥；
當點擊下一頁，當前頁碼加一膀值，當頁碼值等于最后一頁的頁碼值棍丐，則將當前頁碼值置為首頁的頁碼值弟翘；
- 根據數據開始位置和結束為止，加載表格當前頁的數據
使用Array對象的slice(start骄酗，end),方法提取當前需要的表格數據；
即是：
arr.slice(start-1, end)
減1的原因是源數據的索引是從0開始的悦冀，而本例中的數據開始位置是從1開始的趋翻；
每次改變數據條數的時候，將頁碼置為1
頁碼列表展示
根據當前數據條數是否大于等于總數據條數盒蟆，若大于等于則隱藏踏烙，反之顯示或者是判斷表格數據的長度是否小于等于1，若是則隱藏历等，反之顯示讨惩；
代碼
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>分頁組件</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="../css/index.css" />
</head>
<body>
<table border="1" id="table">
<thead>
<tr>
<th>item1</th>
<th>item2</th>
<th>item3</th>
</tr>
</thead>
<tbody></tbody>
</table>
<div class="c-pagination">
<div class="pagination-text">
<div class="page-size">顯示第<span class="start-num" id="startNum">0</span>到第<span class="end-num" id="endNum">0</span>條記錄，總共<span class="total" id="total">0</span>條記錄</div>
<div class="page-list">
每頁顯示<select name="" id="changeNumber">
<option value="0">10</option>
<option value="1">25</option>
<option value="2">50</option>
<option value="3">100</option>
</select>條記錄
</div>
</div>
<ul class="pagination-number" id="paginationList">
<li class="prev" id="prev">
<span>?</span>
</li>
<li class="next" id="next">
<span>?</span>
</li>
</ul>
</div>
<script src="../js/jquery/jquery-3.3.1.min.js"></script>
<script src="../js/vender/index.js"></script>
</body>
</html>
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);
// 創(chuàng)建頁數標簽
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("<li class='page'><span>" + parseInt(i + 1) + "</span></li>");
}
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 = $("<tr></tr>");
for (let key in item) {
oTr.append("<td>" + item[key] + "</td>");
}
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
