精准传达 • 有效沟通
从品牌网站建设到网络营销策划，从策略到执行的一站式服务
如何使用ajax实现分页技术
小编给大家分享一下如何使用ajax实现分页技术，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！
成都创新互联是一家专注于成都网站设计、网站制作与策划设计,于洪网站建设哪家好?成都创新互联做网站,专注于网站建设十余年,网设计领域的专业建站公司;建站业务涵盖:于洪等地区。于洪做网站价格咨询:18980820575
ajax分页效果图如下：
首先，先看 HTML 代码和 CSS 代码，我们需要一个 table 和一个 footer：
首页
上一页
下一页
最后一页
跳转到
页
下面是 css 代码：
#global{
position: relative;
}
#table{
position: absolute;
top:19%;
left:1.6%;
width: 55%;
}
#table textarea{
width: 10vw;
height: 10vh;
background-color: transparent;
color: #fff;
border-width: 0;
text-align: center;
}
table, th, td {
border: 0.2px solid rgba(60,166,206,0.2);
border-collapse: collapse;
color:rgba(60,166,206,1);
}
th, td {
padding: 3px;
text-align: center;
font-size: 1.6vmin;
}
td{
background: rgba(2,29,54,1);
}
th{
background: rgba(20,29,54,1);
padding: 1.8% 0;
color: rgba(255,255,255,0.8);
}
#footer{
position: absolute;
bottom:5vh;
left:7vw;
text-align: center;
color: rgba(60,166,206,1);
}
#pagination{
display: inline-block;
}
#pagination li{
display: inline;
}
#select{
display: inline-block;
margin-left: 40px;
}
#select input[type="text"]{
width: 30px;
height: 20px;
background-color: #000;
border-width: 1px;
}
#select input[type="button"]{
width: 40px;
height: 23px;
background: #000;
border:none;
}
ul li{
cursor: pointer;
}初始化开始日期，结束日期，请求的页数，请求的每页数量，总共有多少页数据，并通过 ajax 将这些数据传给后台提供的 API 数据接口，进而从数据库中获取到数据，然后可以在前端展示：
var start_date = "2017-01-01", end_date = "2017-01-08";
var pageNo = 1;
var pageSize = 4;
var pages = 0;
如何获取表格的数据并将其 append 到前端？如何获取分页的数据并将其 append 到前端？使用下面我们定义的函数：
loadData(pageNo, pageSize);
接下来看这个函数如何跟 API 数据接口沟通：
function loadData(pageNo, pageSize){
$(".detail").remove(); //每次重新从 API 数据接口获取数据都要先清除原先表格 `` 的内容
$.ajax({
url: "/history_alarm",
type: "POST",
data: JSON.stringify({date:date, page_num:pageNo, page_size:pageSize}),
success:function(result){
var results = JSON.parse(result);
var list = results.alarm;
var totalCount = results.alarm_count;
pages = results.page_count;
if(list.length != 0){
for(var i=0; i在 loadData 这个函数中我们还定义了另外3个函数，接下来我们先来看 appendData：
//注意到我们将 `alarm_id` 作为 `'+'
';;
$("#table table").append(text);
}//该函数定义了如何通过 ajax 将用户输入到某一个 `
