Ajax를 사용하여 페이징 기술을 구현하는 단계에 대한 자세한 설명(코드 포함)

이번에는 ajax를 사용하여 페이징 기술을 구현하는 방법을 단계별로 자세히 설명하겠습니다.(코드 포함) ajax를 사용하여 페이징 기술을 구현하는 경우 주의 사항은 무엇입니까? .

ajax 페이징 렌더링은 다음과 같습니다.

먼저 HTML 코드와 CSS 코드를 살펴보겠습니다. 테이블과 바닥글이 필요합니다.

<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>

다음은 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;
}

Initialize start date. , 종료 날짜, 요청 페이지 수, 요청한 페이지 수, 총 데이터 페이지 수를 ajax를 통해 백엔드에서 제공하는 API 데이터 인터페이스에 전달한 후 데이터베이스에서 데이터를 가져옵니다. , 그리고 프런트엔드에 표시합니다.

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

테이블의 데이터를 가져와 프런트엔드에 추가하는 방법은 무엇인가요? 페이지를 매긴 데이터를 가져와서 프런트엔드에 추가하는 방법은 무엇입니까? 아래에 정의한 함수를 사용하세요.

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=&#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);
 }

데이터를 가져오는 함수가 작성되었습니다. 다음으로 페이징의 "홈페이지, 이전 페이지, 다음 페이지, 마지막 페이지, 점프"에 해당하는 이벤트를 클릭해야 합니다. 아이디어는 다음과 같습니다. 사용자가 클릭하는 페이징의 각 항목에 대해 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);
 }
});

믿습니다. 이 기사의 사례를 읽은 후 방법을 마스터했으며 더 흥미로운 내용이 PHP 중국어 웹사이트에 게시되어 있으니 주목해 주세요!

추천도서:

Ajax+mysql로 ​​메시지판 기능 만들기

ajax는 3단계 연계의 가장 기본적인 개념을 구현합니다

위 내용은 Ajax를 사용하여 페이징 기술을 구현하는 단계에 대한 자세한 설명(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!