使用bootstrap实现分页（没使用插件）分页带省略号
效果图如下：
我是后端使用的PHP，并且在JSON数据方面没有采取用对象的方式，而是简单采取特殊符号分割成一个二维数组，从而读取值。
主要思想：前台用Ajax拉取出总页数，分类讨论当前面在第一个、最后两个以及中间的情况，动态绘制分页栏，在后台数据库使用limit限定查询当前页码对应页面的数据量，而不用一次拉取出全部数据。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css">
<link href="../resources/css/app.css" rel="stylesheet"/>
<link href="index.css" rel="stylesheet">
<script src="../resources/js/jquery.js"></script>
<script type="text/javascript" src="http://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.staticfile.org/jqueryui/1.10.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://cdn.staticfile.org/jqueryui-touch-punch/0.2.2/jquery.ui.touch-punch.min.js"></script>
<script type="text/javascript" src="http://cdn.staticfile.org/twitter-bootstrap/3.0.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://cdn.ibootstrap.cn/www.layoutit.com/js/jquery.htmlClean.js"></script>
<script type="text/javascript" src="http://cdn.ibootstrap.cn/www.layoutit.com/js/builder/v3/scripts.min.js"></script>
<script>
function login(){
window.location="../login/index.html";
}
var currentPage=1;
var pagesize = 10;
// getpage(currentPage);
var SumPage;
function rebuiltPage(currentPage) {
if(SumPage<=5) return;
// alert(currentPage);
if(currentPage==1){
// alert(currentPage+"Yes");
$("#pagelist").empty();
let str = "";
str = "<li><a οnclick='getpage(1)'>First</a></li>";
$("#pagelist").append(str);
str = "<li><a οnclick='getprevpage()'>Prev</a></li>";
$("#pagelist").append(str);
endpagenum = currentPage + 2;
for (let i = currentPage; i <= endpagenum; i++) {
str = "<li><a οnclick='getpage(" + i + ")'>" + i + "</a></li>";
$("#pagelist").append(str);
}
str = "<li><a οnclick='rebuiltPage(" + (currentPage + 1) + ")'>" + "…" + "</a></li>";
$("#pagelist").append(str);
str = "<li><a οnclick='getpage(" + SumPage + ")'>" + SumPage + "</a></li>";
$("#pagelist").append(str);
str = "<li><a οnclick='getnextpage()'>Next</a></li>";
$("#pagelist").append(str);
}
else if (currentPage<SumPage-1) {
$("#pagelist").empty();
let str = "";
str = "<li><a οnclick='getpage(1)'>First</a></li>";
$("#pagelist").append(str);
str = "<li><a οnclick='getprevpage()'>Prev</a></li>";
$("#pagelist").append(str);
endpagenum = currentPage + 1;
for (var i = currentPage-1; i <= endpagenum; i++) {
str = "<li><a οnclick='getpage(" + i + ")'>" + i + "</a></li>";
$("#pagelist").append(str);
}
str = "<li><a οnclick='rebuiltPage(" + (currentPage + 1) + ")'>" + "…" + "</a></li>";
$("#pagelist").append(str);
str = "<li><a οnclick='getpage(" + SumPage + ")'>" + SumPage + "</a></li>";
$("#pagelist").append(str);
str = "<li><a οnclick='getnextpage()'>Next</a></li>";
$("#pagelist").append(str);
}
else if(currentPage>=SumPage-1){
$("#pagelist").empty();
let str = "";
str = "<li><a οnclick='getpage(1)'>First</a></li>";
$("#pagelist").append(str);
str = "<li><a οnclick='getprevpage()'>Prev</a></li>";
$("#pagelist").append(str);
str = "<li><a οnclick='getpage(" + 1 + ")'>" + 1 + "</a></li>";
$("#pagelist").append(str);
str = "<li><a οnclick='rebuiltPage(" + (currentPage-1) + ")'>" + "…" + "</a></li>";
$("#pagelist").append(str);
beginPage = SumPage-2;
for (let i = beginPage; i <= SumPage; i++) {
str = "<li><a οnclick='getpage(" + i + ")'>" + i + "</a></li>";
$("#pagelist").append(str);
}
str = "<li><a οnclick='getnextpage()'>Next</a></li>";
$("#pagelist").append(str);
}
}
$.ajax({
type: 'POST',
url: '../../com/index/index.php',
data:"action=tzGetCol",
success: function (data) {
console.log(data);
var a = data.split('&_cxllovezjh');
// alert(a);
console.log(a);
var pagenum = a[0];
SumPage = Math.ceil(pagenum*1.0/pagesize);
getpage(currentPage);
// rebuiltPage(currentPage);
},
error:function(){
console.log("ERROR")
}
});
function getpage(pagenum){
// alert(SumPage);
if(pagenum>SumPage || pagenum<=0){
alert("已经到头啦！");
return;
}
currentPage=pagenum;
rebuiltPage(currentPage);
$.ajax({
type: 'POST',
url: '../../com/index/index.php',
data:"action=tzShowPage&pagenum="+pagenum,
success: function (data) {
console.log(data);
var a = data.split('&_cxllovezjh');
console.log(a);
var trStr="";
$("#tzlist").empty();
for (var i = 0; i < a.length-1; i++) {
//TODO:判断置顶与否，颜色不同
if (JSON.parse(a[i]).top==1) {
trStr += '<li>';
trStr += "<a style='color:red;margin-left:-5px;width:225px;' href='lookpage.html?mold=tz&id="+JSON.parse(a[i]).id+"'>" + "【置顶】" + JSON.parse(a[i]).title;
trStr += "</a>";
trStr += " <span style='color:red;'>" + JSON.parse(a[i]).postdate + "</span>";
trStr += '</li>';
}
else{
trStr += '<li>';
trStr += "<a href='lookpage.html?mold=tz&id="+JSON.parse(a[i]).id+"'>" + JSON.parse(a[i]).title;
trStr += "</a>";
trStr += " <span>" + JSON.parse(a[i]).postdate + "</span>";
trStr += '</li>';
}
}
$("#tzlist").append(trStr);
// $("#hint").html("第"+currentPage+"页，共"+SumPage+"页");
},
error:function(){
console.log("ERROR")
}
});
}
function getprevpage() {
getpage(currentPage-1);
}
function getnextpage() {
getpage(currentPage+1);
}
</script>
</head>
<body>
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column box">
<div id="section_tzgg_title">
<span>新闻通知</span>
</div>
<ul class="list" id="tzlist">
</ul>
</div>
<div class="col-md-12 column">
<span>
<ul class="pagination" id="pagelist">
</ul>
<span class="pagination-lg" id="hint"></span>
</span>
</div>
</div>
</div>
</body>
</html>
PHP中的数据处理语句为：
if($action=="tzShowPage"){
$num = $_POST['pagenum'];
$begin = ($num-1)*10;
$db = new MySQL_DB();
$db->connect();
$sql = "select * from tz order by top desc,postdate desc limit $begin,10";
$db->query($sql);
$db->close();
}
MySQL_DB为自定义的数据库连接类，其query函数原型如下：
public function query($sql){
try {
mysqli_query($this->database_connection, 'set names utf8');
$result = mysqli_query($this->database_connection, $sql);
// echo
if (mysqli_num_rows($result) > 0) {
// 输出数据
while ($row = mysqli_fetch_assoc($result)) {
echo json_encode($row,JSON_UNESCAPED_UNICODE).'&_cxllovezjh';//转化为json串传输
}
}
else {
// echo "0 结果";
}
}
catch (Exception $e){
// echo "异常！连接未建立！";
return -1;
}
return 0;
}
浙公网安备 33010602011771号