Bootstrap分页的确很漂亮，不过看引用的js感觉一脸懵逼，用起来不方便，所以自己写了下，需要的可以拷贝过去用：
一：效果预览
二：拷贝下面代码就可以使用
<!DOCTYPE html>
<html>
<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="../../Plugin/Bootstrap/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div>
<div>
<div>
<div class="panel panel-success">
<div>
分页演示
</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="../../Scripts/jquery-1.9.1.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>‘;
if (pagenumber == 1) {
strhtml += ‘<li data-index="pre" id="prepage"><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 + ‘><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"><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>
三：总结
代码看起来很长很丑，拷贝过去边体验边看效果更好
