Bootstrap分页的确很漂亮，不过看引用的js感觉一脸懵逼，用起来不方便，所以自己写了下，需要的可以拷贝过去用：
一：效果预览
二：HTML和js 代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>分页</title>
<link href="https://v3.bootcss.com/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="panel panel-success">
<div class="panel-heading">
分页演示
</div>
<table class="table table-hover">
<thead>
<tr>
<th width="5%"></th>
<th width="75%">内容</th>
<th width="20%">操作</th>
</tr>
</thead>
<tbody id="js_Table"></tbody>
</table>
<div id="j_divPage" style="float:right;">
</div>
</div>
</div>
</div>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
var data =
[
{ id: 1, content: \'人生若只如初见\' }
, { id: 2, content: \'何事秋风悲画扇\' }
, { id: 3, content: \'等闲变却故人心\' }
, { id: 4, content: \'却道故人心易变\' }
, { id: 5, content: \'骊山语罢清宵半\' }
, { id: 6, content: \'泪雨霖铃终不怨\' }
, { id: 7, content: \'何如薄幸锦衣郎\' }
, { id: 8, content: \'比翼连枝当日愿\' }
, { id: 9, content: \'胜日寻芳泗水滨\' }
, { id: 10, content: \'无边光景一时新\' }
, { id: 11, content: \'等闲识得东风面\' }
];
var PageSize = 3;
getDataList(1);
function getDataList(PageNumber) {
var showData = [];
var startid = (PageNumber - 1) * PageSize;
var endid = PageNumber * PageSize;
$.each(data, function (i, item) {
if (startid < item.id && item.id <= endid) {
showData.push(item);
}
})
var $tableID = $("#js_Table");
$tableID.empty();
InitWebPager(data.length, PageNumber, PageSize, $("#j_divPage"), function (pageClickedNumber) {
getDataList(pageClickedNumber);
});
$.each(showData, function (i, item) {
var strhtml = [\' <tr>\',
\' <th scope="row">\'+item.id+\'</th>\',
\' <td>\'+item.content+\'</td>\',
\' <td><a href="javascript:;"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></a></td>\',
\' </tr>\'].join("");
$tableID.append(strhtml);
});
}
//total：记录总数
//pagenumber:第几页
//pagesize：分页大少
//$j_page：分页ID
//callback：分页回调点击事件
function InitWebPager(total, pagenumber, pagesize, $j_page, callback) {
var linkshow = 7;//最多显示页
$j_page.empty();
if (total < pagesize) {
$j_page.hide();
return;
} else {
$j_page.show();
}
var strhtml = \'\';
strhtml += \'<ul class="pagination">\';
if (pagenumber == 1) {
strhtml += \'<li data-index="pre" id="prepage" class="disabled"><a href="#">上一页</a></li>\';
} else {
strhtml += \'<li data-index="pre" id="prepage"><a href="#">上一页</a></li>\';
}
for (var i = 1; i <= Math.ceil(total / pagesize); i++) {
if (i == 1) {
strhtml += \'<li data-index=\' + i + \' class="active"><a href="#">\' + i + \'</a></li>\';
} else if (i > linkshow) {
strhtml += \'<li data-index=\' + i + \' style="display:none"><a href="#">\' + i + \'</a></li>\';
} else {
strhtml += \'<li data-index=\' + i + \' ><a href="#">\' + i + \'</a></li>\';
}
}
if (pagenumber == Math.ceil(total / pagesize)) {
strhtml += \'<li data-index="next" id="nextpage" class="disabled"><a href="#">下一页</a></li>\';
} else {
strhtml += \'<li data-index="next" id="nextpage"><a href="#">下一页</a></li>\';
}
strhtml += "</ul>";
$j_page.append(strhtml);
$(".pagination li").removeClass("active");
$j_page.find("[data-index=" + pagenumber + "]").addClass("active");
$(".pagination li").click(function () {
if ($(this).data("index") == \'pre\') {//上一页
if ($(this).hasClass("disabled")) return;
$(".pagination .active").prev().trigger("click");
} else if ($(this).data("index") == \'next\') {//下一页
if ($(this).hasClass("disabled")) return;
$(".pagination .active").next().trigger("click");
} else {//相应的页数
if (pagenumber == $(this).data("index")) {
return;
}
pagenumber = $(this).data("index");
$(".pagination li").removeClass("active");
$(this).addClass("active");
if (pagenumber == 1) {
$("#prepage").addClass("disabled");
}
else {
$("#prepage").removeClass("disabled");
}
if (pagenumber == Math.ceil(total / pagesize)) {
$("#nextpage").addClass("disabled");
}
else {
$("#nextpage").removeClass("disabled");
}
$(".pagination li").hide();
var leftcount = 0;
var forCount = parseInt(linkshow / 2) + 1;
for (var i = 1; i < forCount; i++) {
var index = pagenumber - i;
if ($j_page.find("[data-index=" + index + "]").length > 0) {
$j_page.find("[data-index=" + index + "]").show();
} else {
leftcount += 1;
}
}
var rightcount = 0;
for (var i = 1; i < forCount + leftcount; i++) {
var index = pagenumber + i;
if ($j_page.find("[data-index=" + index + "]").length > 0) {
$j_page.find("[data-index=" + index + "]").show();
} else {
rightcount += 1;
}
}
for (var i = 1; i < forCount + rightcount; i++) {
var index = pagenumber - i;
$j_page.find("[data-index=" + index + "]").show();
}
$j_page.find("#prepage").show();
$j_page.find("#nextpage").show();
$j_page.find("[data-index=" + pagenumber + "]").show();
callback($(this).data("index"))
}
});
}
</script>
</html>
三：说明
思路就是：
1.有个数据源 data
2.通过方法 getDataList(1) 获取数据源里面的第一页
3.var PageSize = 3 一页有三条
4.调用方法初始化分页 InitWebPager
5.分页的点击事件又调用 getDataList(传入点击页数)