小编给大家分享一下如何使用ajax实现分页技术,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!
成都创新互联是一家专注于成都网站设计、网站制作与策划设计,于洪网站建设哪家好?成都创新互联做网站,专注于网站建设十余年,网设计领域的专业建站公司;建站业务涵盖:于洪等地区。于洪做网站价格咨询:18980820575
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` 作为 `//该函数定义了如何通过 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); } });看完了这篇文章,相信你对“如何使用ajax实现分页技术”有了一定的了解,如果想了解更多相关知识,欢迎关注创新互联行业资讯频道,感谢各位的阅读!
分享文章:如何使用ajax实现分页技术
网站路径:http://cdkjz.cn/article/ihiggj.html