1、Ajax 無刷新頁面的好處：提供良好的客戶體驗，通過 Ajax 在后臺從數據庫中取得數據并展示，取締了等待加載頁面而出現的空白狀態；
2、那么，Ajax 無刷新頁面是運行在動態頁面（.php）？還是靜態頁面（.html/.htm/.shtml）？答案是：靜態頁面；
3、實現原理：通過前端 JS 腳本程序與 Ajax 相結合取得從動態頁面返回的數據，并顯示。
現在什么都講究一個無刷新，就連分頁也是如此，下面是小編日常整理的關于一段無刷新代碼，希望能夠幫到大家。
代碼如下:
一.html代碼部分:
table class="table style-5">
thead id="t_head">
tr>
th>序號/th>
th>標題/th>
th>地點/th>
th>已報名/th>
th>類別/th>
th>操作/th>
/tr>
/thead>
tbody id="t_body">
!-- ajax填充列表 -->
/tbody>
/table>
button id="firstPage">首頁/button>
button id="previous">上一頁/button>
button id="next">下一頁/button>
button id="last">尾頁/button>
二.ajax代碼部分:
var pageSize = "10";//每頁行數
var currentPage = "1";//當前頁
var totalPage = "0";//總頁數
var rowCount = "0";//總條數
var params="";//參數
var url="activity_list.action";//action
$(document).ready(function(){//jquery代碼隨著document加載完畢而加載
//分頁查詢
function queryForPages()
{
$.ajax({
url:url,
type:'post',
dataType:'json',
data:"qo.currentPage="+currentPage+"qo.pageSize="+pageSize+params,
success:function callbackFun(data)
{
//解析json
var info = eval("("+data+")");
//清空數據
clearDate();
fillTable(info);
}
});
}
//填充數據
function fillTable(info)
{
if(info.length>1)
{
totalPage=info[info.length-1].totalPage;
var tbody_content="";//不初始化字符串"",會默認"undefined"
for(var i=0;iinfo.length-1;i++)
{
tbody_content +="tr>"
+"td data-title='序號' >"+(i+1+(currentPage-1)*pageSize)+"/td>"
+"td data-title='標題'>"+info[i].title.substr(0,20)+"/td>"
+"td data-title='地點'>"+info[i].address.substr(0,6)+"/td>"
+"td data-title='已報名'>"+info[i].quota_sign+"人/td>"
+"td data-title='類別'>"+info[i].type+"/td>"
+"td data-title='操作'>a href='%=request.getContextPath()%>/activity_edit.action?id="+info[i].id+"'>編輯/a>/td>"
+"/tr>"
$("#t_body").html(tbody_content);
}
}
else
{
$("#t_head").html("");
$("#t_body").html("div style='height: 200px;width: 700px;padding-top: 100px;' align='center'>"+info.msg+"/div>");
}
}
//清空數據
function clearDate()
{
$("#t_body").html("");
}
//搜索活動
$("#searchActivity").click(function(){
queryForPages();
});
//首頁
$("#firstPage").click(function(){
currentPage="1";
queryForPages();
});
//上一頁
$("#previous").click(function(){
if(currentPage>1)
{
currentPage-- ;
}
queryForPages();
});
//下一頁
$("#next").click(function(){
if(currentPagetotalPage)
{
currentPage++ ;
}
queryForPages();
});
//尾頁
$("#last").click(function(){
currentPage = totalPage;
queryForPages();
});
});
以上代碼是小編給大家介紹的ajax實現的無刷新分頁，希望對大家有所幫助。
您可能感興趣的文章:- Flash Ajax 操作 XML 實例:無刷新分頁
- php ajax無刷新分頁,支持id定位
- jquery 插件 web2.0分格的分頁腳本，可用于ajax無刷新分頁
- AspNetAjaxPager,Asp.Net通用無刷新Ajax分頁控件，支持多樣式多數據綁定
- JS+Ajax+Jquery實現頁面無刷新分頁以及分組 超強的實現
- ajax實現無刷新分頁(php)
- jQuery Pagination Ajax分頁插件(分頁切換時無刷新與延遲)中文翻譯版
- JQuery+Ajax無刷新分頁的實例代碼
- php+ajax實現無刷新分頁的方法
- asp.net使用AJAX實現無刷新分頁
