Ajax+php+jquery無重新整理分頁處理
阿新 • • 發佈：2019-02-04
日常醬油.....
如下動圖:
主要解決的問題如下:
1.使用PDO連線資料庫2.PDO::query 執行SQL語句,返回PDOStatement物件,可以理解為結果集3.PDOStatement::fetchColumn 從結果集中的下一行返回單獨的一列 4.ceil() : 函式向上舍入為最接近的整數,如:ceil(0.60); //1ceil(0.40);//1ceil(5);//5ceil(5.1);//6ceil(-5.1);//-1ceil(-5.9);//-55. 關鍵點:如何得到指定範圍內的資料,使用: SELECT * FROM news LIMIT start, sizestart :表示擷取資料的開始位置(下標從0開始)PDOStatement::fetchAll 返回一個包含結果集中所有行的陣列PDO::TETCH_ASSOC 返回一個索引為結果集列名的陣列 json_encode 對變數進行JSON編碼,該函式如果執行成功返回jason資料程式碼:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/index.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
<div class="box">
<div class="title">
PHP + Ajax + jQuery 無重新整理分頁
</div>
<!--頁面內容-->
<div class="list">
<ul class="content"></ul>
</div>
<!--分頁連結-->
<div class="pagelist">
</div>
</div>
<script>
$(function() {
var page = 1;
var n = 0;
var max = 1;
getData();
/*獲取指定頁的資料*/
function getData() {
$.ajax({
type: "GET",
url: "ajax.php",
data: {
"page": page
},
dateType: "json",
success: function(json) {
json = JSON.parse(json);
n = json.total;
max = json.max;
content(json.list);
},
complete: function() {
pageList();
},
error: function() {
alert("請求錯誤");
}
});
}
/*生成分頁連線*/
function pageList() {
page = Math.min(page, max);
page = Math.max(page, 1);
var html = "<div><span>共" + n + "條,第" + page + "/" + max + "頁</span>";
html += '<a href="#" data-page="1">首頁</a>';
html += (page > 1) ? '<a href="#" data-page="' + (page - 1) + '">上一頁</a>' : '<a href="#" data-page="1">上一頁</a>';
html += (page < max) ? '<a href="#" data-page="' + (page + 1) + '">下一頁</a>' : '<a href="#" data-page="' + max + '">下一頁</a>';
html += '<a href="#" data-page="' + max + '">尾頁</a></div>';
var $html = $(html);
//為連結新增單擊事件
$html.find("a").click(function() {
page = $(this).attr("data-page");
getData();
});
$(".pagelist").html($html);
}
/*生成內容*/
function content(list) {
var str = " ";
for(var i in list) {
str += '<li><img src="' + list[i]['pic'] + '"/><p><a href="#">' + list[i]['title'] + '</a></p></li>'
}
$(".content").html(str);
}
})
</script>
</body>
</html>$start = ($page-1) * $size;
$sql = "SELECT * FROM `books` limit $start,$size";
$data = $conn->query($sql)->fetchAll(PDO::FETCH_ASSOC);
$result = array(
'total' => $n,
'max' => $max,
'list' => array()
);
foreach($data as $v){
$result['list'][] = array(
'id' => $v["id"],
'title' => $v["title"],
'pic' => $v["pic"]
);
}
echo json_encode($result);
?>簡單樣式
index.css
body {
margin: 0;
background: whitesmoke;
color: #555;
}
div.box {
color: firebrick;
width: 900px;
position: relative;
margin: 0 auto;
}
div.title {
text-align: center;
}
ul.content {
list-style: none;
}
li {
width: 250px;
height: 210px;
float: left;
border: 1px solid gainsboro;
font-size: 12px;
text-decoration: none;
}
div.pagelist {
position: absolute;
top: 500px;
left: 200px;
}
img {
width: 250px;
height: 155px;
margin: 0px;
}
.content a,
.pagelist a {
cursor: pointer;
font-size: 16px;
text-decoration: none;
font-family: "微軟雅黑";
}
.content a:hover,
.pagelist a:hover {
color: firebrick;
}完整程式碼連線:程式碼下載