使用ajax实现分页技术

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）; }}）;

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