时间:2021-05-25
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); }});以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
今天我们要用ajax做一个分页:实现Ajax分页:如果可以的话加上查询条件找一张表做分页分页不使用page类页面不用刷新Ajax加载数据Document.dan
本文实例讲述了ThinkPHP5.1+Ajax实现的无刷新分页功能。分享给大家供大家参考,具体如下:无刷新分页可以减轻服务器负担,利用Ajax技术,请求部分信息
最近因工作需要,要在静态页面上实现分页,想了下,决定用AJAX来实现,所以就捣鼓了下面这么个东西,截图如下:复制代码代码如下:AJAX静态分页静态分页的AJAX
Ajax无刷新分页效果,如下代码实现Ajax无刷新分页效果functionshowpage(url){varxhr=newXMLHttpRequest();xh
本文为在mvc4中使用ajax实现无刷新分页demo,记录一下。解决方案思想:页面数据的初始加载和按页加载都是通过ajax来进行,页面分页链接点击后利用ajax