怎么用ajax写分页,使用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

var alarm_id = list[i].alarm_id;

var alarm_pic = list[i].alarm_pic;

var date = list[i].date;

var event = list[i].event;

var time = list[i].time;

var remark = list[i].remark;

appendData(alarm_id, alarm_pic, date, event, time, remark);

addEvent(alarm_id);

}

$("#table").show();

$("#footer").show();

displayFooter(totalCount, pages, pageNo);

} else{

$("#table").hide();

$("#footer").hide();

}

},

error:function(){

//error handle function

}

});

}

在 loadData 这个函数中我们还定义了另外3个函数，接下来我们先来看 appendData：

//注意到我们将 `alarm_id` 作为 `` 'class` 的值，也作为提交按钮 `id` 的值，这是因为我们要通过 ajax 将用户输入到某一个 `` 的值作为参数传给后台 API 接口，由其写入数据库。

function appendData(alarm_id, alarm_pic, date, event, time, remark){

var text = '

'+date+''+time+''+event+''+

'

'+

'

class='+alarm_id+'>'+remark+'

'+' ';;

$("#table table").append(text);

}

//该函数定义了如何通过 ajax 将用户输入到某一个 `` 的值作为参数传给后台 API 接口，并写入数据库

function addEvent(alarm_id){

$("#"+alarm_id).click(function(){

var remark = $("."+alarm_id).val();

if(remark != ""){

$.ajax({

url:"/history_alarm",

type:"POST",

data:JSON.stringify({alarm_id:alarm_id, note:remark}),

success:function(result){

var results = JSON.parse(result);

if(results.status == "ok"){

console.log('ok');

}

}

})

}

})

}

function displayFooter(totalCount, pages, pageNo){

var newText = '共' + totalCount + '条，' + '第' + pageNo + '页，' + '共' + pages + '页';

$("#summary").text(newText);

}

获取数据的函数写好了，接下来就要点击分页的“首页、上一页、下一页、最后一页、跳转”时候所对应的事件了。思路是这样的：用户点击分页的每一个项目，都要重新判断 pageNo，然后将 pageNo 作为参数，再次调用获取数据的 API 接口：

$("input[name='page_num']").keydown(function(e){ if(e.keyCode == 13){ $("input[name='go_btn']").click(); } });

$("input[name='go_btn']").click(function(){

var goPage = $("input[name='page_num']").val();

if(goPage >= 1 && goPage <=pages && goPage != pageNo){

pageNo = goPage;

loadData(pageNo, pageSize);

} else{

return false;

}

});

$("#01").click(function(){

pageNo = 1;

loadData(pageNo, pageSize);

});

$("#04").click(function(){

pageNo = pages;

loadData(pageNo, pageSize);

});

$("#02").click(function(){

if(pageNo == 1){

return false;

} else{

pageNo--;

loadData(pageNo, pageSize);

}

});

$("#03").click(function(){

if(pageNo == pages){

return false;

} else{

pageNo++;

loadData(pageNo, pageSize);

}

});

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。