欢乐颂小说结局是什么,听中国有声小说

主頁(yè) > 知識(shí)庫(kù) > 使用ajax實(shí)現(xiàn)分頁(yè)技術(shù)

使用ajax實(shí)現(xiàn)分頁(yè)技術(shù)

ajax分頁(yè)效果圖如下：

首先，先看 HTML 代碼和 CSS 代碼，我們需要一個(gè) table 和一個(gè) 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>時(shí)間/th>
 th>事件/th>
 th>報(bào)警畫(huà)面/th>
 th>事件備注/th>
 /tr>
 /table>
 /div>
 div id="footer">
 span id="summary">/span>
 ul id="pagination">
 li id="01">首頁(yè)/li>
 li id="02">上一頁(yè)/li>
 li id="03">下一頁(yè)/li>
 li id="04">最后一頁(yè)/li>
 /ul>
 div id="select">
 span>跳轉(zhuǎn)到 /span>
 input type="text" name="page_num">
 span> 頁(yè) /span>
 input type="button" name="go_btn" value="跳轉(zhuǎn)">
 /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;
}

初始化開(kāi)始日期，結(jié)束日期，請(qǐng)求的頁(yè)數(shù)，請(qǐng)求的每頁(yè)數(shù)量，總共有多少頁(yè)數(shù)據(jù)，并通過(guò) ajax 將這些數(shù)據(jù)傳給后臺(tái)提供的 API 數(shù)據(jù)接口，進(jìn)而從數(shù)據(jù)庫(kù)中獲取到數(shù)據(jù)，然后可以在前端展示：

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

如何獲取表格的數(shù)據(jù)并將其 append 到前端？如何獲取分頁(yè)的數(shù)據(jù)并將其 append 到前端？使用下面我們定義的函數(shù)：

loadData(pageNo, pageSize);

接下來(lái)看這個(gè)函數(shù)如何跟 API 數(shù)據(jù)接口溝通：

function loadData(pageNo, pageSize){
 $(".detail").remove(); //每次重新從 API 數(shù)據(jù)接口獲取數(shù)據(jù)都要先清除原先表格 `tr>` 的內(nèi)容
 $.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; ilist.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 這個(gè)函數(shù)中我們還定義了另外3個(gè)函數(shù)，接下來(lái)我們先來(lái)看 appendData：

//注意到我們將 `alarm_id` 作為 `textarea>` 'class` 的值，也作為提交按鈕 `id` 的值，這是因?yàn)槲覀円ㄟ^(guò) ajax 將用戶(hù)輸入到某一個(gè) `textarea>` 的值作為參數(shù)傳給后臺(tái) API 接口，由其寫(xiě)入數(shù)據(jù)庫(kù)。
function appendData(alarm_id, alarm_pic, date, event, time, remark){
 var text = 'tr class="detail">td>'+date+'/td>td>'+time+'/tdtd>'+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);
 }

//該函數(shù)定義了如何通過(guò) ajax 將用戶(hù)輸入到某一個(gè) `textarea>` 的值作為參數(shù)傳給后臺(tái) API 接口，并寫(xiě)入數(shù)據(jù)庫(kù)
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 + '頁(yè)，' + '共' + pages + '頁(yè)';
 $("#summary").text(newText);
 }

獲取數(shù)據(jù)的函數(shù)寫(xiě)好了，接下來(lái)就要點(diǎn)擊分頁(yè)的“首頁(yè)、上一頁(yè)、下一頁(yè)、最后一頁(yè)、跳轉(zhuǎn)”時(shí)候所對(duì)應(yīng)的事件了。思路是這樣的：用戶(hù)點(diǎn)擊分頁(yè)的每一個(gè)項(xiàng)目，都要重新判斷 pageNo，然后將 pageNo 作為參數(shù)，再次調(diào)用獲取數(shù)據(jù)的 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);
 }
});

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

用jQuery中的ajax分頁(yè)實(shí)現(xiàn)代碼
JQuery+Ajax無(wú)刷新分頁(yè)的實(shí)例代碼
jQuery Pagination Ajax分頁(yè)插件(分頁(yè)切換時(shí)無(wú)刷新與延遲)中文翻譯版
Ajax讀取數(shù)據(jù)之分頁(yè)顯示篇實(shí)現(xiàn)代碼
php,ajax實(shí)現(xiàn)分頁(yè)
JS+Ajax+Jquery實(shí)現(xiàn)頁(yè)面無(wú)刷新分頁(yè)以及分組超強(qiáng)的實(shí)現(xiàn)
使用PHP+JQuery+Ajax分頁(yè)的實(shí)現(xiàn)
基于Jquery+Ajax+Json的高效分頁(yè)實(shí)現(xiàn)代碼
jQuery DataTables插件自定義Ajax分頁(yè)實(shí)例解析
php+ajax實(shí)現(xiàn)無(wú)刷新分頁(yè)的方法

標(biāo)簽：遼寧益陽(yáng) 銅川玉樹(shù) 內(nèi)江四川本溪營(yíng)口

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《使用ajax實(shí)現(xiàn)分頁(yè)技術(shù)》，本文關(guān)鍵詞使用,ajax,實(shí)現(xiàn),分頁(yè),技術(shù),；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題，煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無(wú)關(guān)。

濮阳杆衣贸易有限公司

使用ajax實(shí)現(xiàn)分頁(yè)技術(shù)