Explication détaillée des étapes pour implémenter la technologie de pagination à l'aide d'ajax (avec code)

Cette fois, je vais vous apporter une explication détaillée étape par étape de l'utilisation d'ajax pour implémenter la technologie de pagination (avec code). Quelles sont les précautions pour utiliser ajax pour implémenter la technologie de pagination. un cas pratique, jetons un coup d'oeil.

Le rendu de la pagination ajax est le suivant :

Regardons d'abord le code HTML et le code CSS. Nous avons besoin d'un tableau et d'un pied de page : <.>

<p id="global">
<p 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>
 </p>
 <p 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>
 <p id="select">
 <span>跳转到 </span>
 <input type="text" name="page_num">
 <span> 页 </span>
 <input type="button" name="go_btn" value="跳转">
 </p>
 </p>
</p>

Voici le code 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;
}

Initialisez la date de début, la date de fin, le nombre de pages demandées, le nombre de pages demandées, le nombre total de pages de données, et transmettre ces données via ajax L'interface de données API fournie par le backend peut ensuite obtenir les données de la base de données, puis les afficher sur le front-end :

var start_date = "2017-01-01", end_date = "2017-01-08";
var pageNo = 1;
var pageSize = 4;
var pages = 0;

Comment obtenir les données du table et l'ajouter au front-end ? Comment obtenir des données paginées et les ajouter au frontend ? Utilisez la fonction que nous avons définie ci-dessous :

loadData(pageNo, pageSize);

Voyons comment cette fonction communique avec l'interface de données de l'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
 }
 });
 }

Dans la fonction loadData, nous avons également défini trois autres fonctions. Ensuite, regardons 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=&#39;+alarm_id+&#39;>'+remark+'</textarea>'+'<img id=&#39;+alarm_id+&#39; 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);
 }

La fonction pour obtenir les données est écrite. Il est nécessaire de cliquer sur l'événement correspondant à l'option "Page d'accueil, Page précédente, Page suivante, Dernière page, Saut" de la pagination. L'idée est la suivante : pour chaque élément de la pagination sur lequel l'utilisateur clique, le pageNo doit être réévalué, puis le pageNo est utilisé comme paramètre pour appeler l'interface API afin d'obtenir à nouveau des données :

$("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);
 }
});

Je pense que vous l'avez maîtrisé après avoir lu le cas dans cet article. Pour des méthodes plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Ajax+mysql pour créer une fonction de forum de messages

La manière la plus basique pour ajax de réaliser Concept de liaison à trois niveaux

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!