成都网站建设设计

将想法与焦点和您一起共享

如何使用ajax实现分页技术

小编给大家分享一下如何使用ajax实现分页技术,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!

成都创新互联是一家专注于成都网站设计、网站制作与策划设计,于洪网站建设哪家好?成都创新互联做网站,专注于网站建设十余年,网设计领域的专业建站公司;建站业务涵盖:于洪等地区。于洪做网站价格咨询:18980820575

ajax分页效果图如下:

如何使用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 将用户输入到某一个 `