使用ajax实现分页技术
程序员文章站
2022-03-31 14:10:26
ajax分页效果图如下：
首先，先看 html 代码和 css 代码，我们需要一个 table 和一个 footer：
ajax分页效果图如下：
首先，先看 html 代码和 css 代码，我们需要一个 table 和一个 footer：
<div id="global"> <div id="table"> <table> <col width="19%"> <col width="19%"> <col width="19%"> <col width="19%"> <col width="24%"> <tr> <th>日期</th> <th>时间</th> <th>事件</th> <th>报警画面</th> <th>事件备注</th> </tr> </table> </div> <div id="footer"> <span id="summary"></span> <ul id="pagination"> <li id="01">首页</li> <li id="02">上一页</li> <li id="03">下一页</li> <li id="04">最后一页</li> </ul> <div id="select"> <span>跳转到 </span> <input type="text" name="page_num"> <span> 页 </span> <input type="button" name="go_btn" value="跳转"> </div> </div> </div>
下面是 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 数据接口获取数据都要先清除原先表格 `<tr>` 的内容
$.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<list.length; 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` 作为 `<textarea>` 'class` 的值，也作为提交按钮 `id` 的值，这是因为我们要通过 ajax 将用户输入到某一个 `<textarea>` 的值作为参数传给后台 api 接口，由其写入数据库。
function appenddata(alarm_id, alarm_pic, date, event, time, remark){
var text = '<tr class="detail"><td>'+date+'</td><td>'+time+'</td<td>'+event+'</td>'+
'<td><img class="img01" src=data:image/jpeg;base64,' + alarm_pic + '</td>'+
'<td class="modity_btn"><textarea cols="5" rows="3"
class='+alarm_id+'>'+remark+'</textarea>'+'<img id='+alarm_id+' src="{{
static_url("slice/modify.png") }}"></td></tr>';;
$("#table table").append(text);
}
//该函数定义了如何通过 ajax 将用户输入到某一个 `<textarea>` 的值作为参数传给后台 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);
}
});
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。