使用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);

 }

});





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