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>跳轉(zhuǎn)到 /span>
input type="text" name="page_num">
span> 頁 /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;
}
初始化開始日期，結(jié)束日期，請求的頁數(shù)，請求的每頁數(shù)量，總共有多少頁數(shù)據(jù)，并通過 ajax 將這些數(shù)據(jù)傳給后臺提供的 API 數(shù)據(jù)接口，進而從數(shù)據(jù)庫中獲取到數(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 到前端？如何獲取分頁的數(shù)據(jù)并將其 append 到前端？使用下面我們定義的函數(shù)：
loadData(pageNo, pageSize);
接下來看這個函數(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 這個函數(shù)中我們還定義了另外3個函數(shù)，接下來我們先來看 appendData：
//注意到我們將 `alarm_id` 作為 `textarea>` 'class` 的值，也作為提交按鈕 `id` 的值，這是因為我們要通過 ajax 將用戶輸入到某一個 `textarea>` 的值作為參數(shù)傳給后臺 API 接口，由其寫入數(shù)據(jù)庫。
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ù)定義了如何通過 ajax 將用戶輸入到某一個 `textarea>` 的值作為參數(shù)傳給后臺 API 接口，并寫入數(shù)據(jù)庫
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);
}
獲取數(shù)據(jù)的函數(shù)寫好了，接下來就要點擊分頁的“首頁、上一頁、下一頁、最后一頁、跳轉(zhuǎn)”時候所對應(yī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);
}
});
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:- 用jQuery中的ajax分頁實現(xiàn)代碼
- JQuery+Ajax無刷新分頁的實例代碼
- jQuery Pagination Ajax分頁插件(分頁切換時無刷新與延遲)中文翻譯版
- Ajax讀取數(shù)據(jù)之分頁顯示篇實現(xiàn)代碼
- php,ajax實現(xiàn)分頁
- JS+Ajax+Jquery實現(xiàn)頁面無刷新分頁以及分組 超強的實現(xiàn)
- 使用PHP+JQuery+Ajax分頁的實現(xiàn)
- 基于Jquery+Ajax+Json的高效分頁實現(xiàn)代碼
- jQuery DataTables插件自定義Ajax分頁實例解析
- php+ajax實現(xiàn)無刷新分頁的方法
