展示頁面：index.html
<html>
<script>
function ajax_show() {
// 獲取當前頁
var page =1;
var xhr = new XMLHttpRequest();
xhr.open('get','getdata.php?p='+page)
xhr.send()
xhr.onreadystatechange=function(){
if (xhr.status==200&&xhr.readyState==4) {
// 把字符串轉為json對象
data = JSON.parse(xhr.responseText)
jsondata = data['data']
pagenum = data['pagenum']
var str='<tr><td>ID</td><td>單位名稱</td><td>用戶名</td><td>手機號</td></tr>'
for (var i = 0; i < jsondata.length; i++) {
str=str+'<tr><td>'+jsondata[i].id+'</td><td>'+jsondata[i].company_name+'</td><td>'+jsondata[i].user+'</td><td>'+jsondata[i].tel+'</td></tr>'
}
document .getElementById('content').innerHTML=str
document .getElementById('end_page').value=pagenum
}
}
}
window.onload=function(){
ajax_show()
}
function ajax_go(type){
// 獲取當前頁
var page =parseInt(document.getElementById('current_page').value);
// 獲取尾頁
var pagenum= document.getElementById('end_page').value
if(type=='prev'){
// 上一頁
var pages = page-1>1?page-1:1
}else if(type=='next'){
// 下一頁
var pages = page+1>=pagenum?pagenum:page+1
}else if(type=='end'){
//尾頁
var pages = pagenum;
}
var xhr = new XMLHttpRequest();
xhr.open('get','getdata.php?p='+pages)
xhr.send()
xhr.onreadystatechange=function(){
if (xhr.status==200&&xhr.readyState==4) {
var json = JSON.parse(xhr.responseText)
var jsondata = json['data']
var str='<tr><td>ID</td><td>單位名稱</td><td>用戶名</td><td>手機號</td></tr>'
for (var i = 0; i < jsondata.length; i++) {
str=str+'<tr><td>'+jsondata[i].id+'</td><td>'+jsondata[i].company_name+'</td><td>'+jsondata[i].user+'</td> <td>'+jsondata[i].tel+'</td></tr>'
}
document .getElementById('content').innerHTML=str
document .getElementById('current_page').value=pages
}
}
}
</script>
<body>
<table border="1">
<tbody id="content">
</tbody>
</table>
<div>
<input type="hidden" id="current_page" value='1'>
<input type="hidden" id="end_page" value="">
<span><button onclick="ajax_show()">首頁</button></span>
<span><button onclick="ajax_go('prev')">上一頁</button></span>
<span><button onclick="ajax_go('next')">下一頁</button></span>
<span><button onclick="ajax_go('end')">尾頁</button></span>
</div>
</body>
</html>
后台頁面：getdata.php
<?php
$link = mysqli_connect('127.0.0.1', 'root', '123456', '12a');
mysqli_query($link, 'set names utf8');
// 接收頁碼
$p = isset($_GET['p']) ? $_GET['p'] : 1;
// 總條數：
$sql = "select * from company";
$res = mysqli_query($link, $sql);
$rows = mysqli_num_rows($res);
// 設置每頁顯示幾條
$size = 3;
$start = ($p - 1) * $size;
$limitsql = "select * from company limit $start,$size";
$limit_res = mysqli_query($link, $limitsql);
while ($row = mysqli_fetch_assoc($limit_res)) {
$data[] = $row;
}
// 總頁數
$end = ceil($rows / $size);
//返回 json數據
echo json_encode(['data' => $data, 'pagenum' => $end]);
效果圖：
