基于AJAX的分頁類實(shí)現(xiàn)代碼
更新時(shí)間：2009年09月03日 02:05:35 作者：
隨著AJAX在互聯(lián)網(wǎng)上的廣泛運(yùn)用，公司也在越來越多的項(xiàng)目里涉及到了AJAX，最近一段時(shí)間空閑，于是就用JS寫了一個(gè)基于AJAX的異步分頁類。先不多說，還是先將源碼貼出，再進(jìn)行說明~~~
復(fù)制代碼 代碼如下:
/**
* <p>pagination.js
* <p>通用的基于AJAX的分頁類
* @author jeanwendy
* @version 1.0
*/
var paginationIndex = 0;
var pagination = function(trTemplatId) {
$().ajaxStart(function() {
$.blockUI({
message : '<table><tr><td style="vertical-align :bottom"><font size=2pt> 加載數(shù)據(jù)，請(qǐng)稍后...</font></td></tr></table>'
});
}).ajaxStop($.unblockUI);
paginationIndex = paginationIndex + 1;
this.id = paginationIndex;
this.trTemplatId = trTemplatId;
this.pageNo = 1;
this.pageSize = 10;
this.beforeQuery = null;
this.afterQuery = null;
this.url = null;
this.params = null;
this.templat = null;
this.childrenCount = null;
this.setPageNo = function(pageNo) {
if (pageNo != null)
this.pageNo = pageNo;
}
this.setPageSize = function(pageSize) {
if (pageSize != null)
this.pageSize = pageSize;
}
this.setBeforeQuery = function(fn){
this.beforeQuery = fn;
}
this.setAfterQuery = function(fn){
this.afterQuery = fn;
}
this.load = function(url, params) {
//初始化(只在第一次查詢時(shí)執(zhí)行)
if(this.templat == null && this.childrenCount == null){
var templatObj = $('#'+this.trTemplatId);
templatObj.parent().attr('id','tbody_id'+this.id);
templatObj.removeAttr('id');
templatObj.wrap("<div id='divTemplat'></div>");
this.templat = $('#divTemplat').html();
$('#divTemplat').remove();
this.childrenCount = $('#tbody_id'+this.id).children().size();
}
//開始查詢
this.url = url;
if(params == null) params = {};
$.extend(params,{pageNo:this.pageNo,pageSize:this.pageSize});
this.params = params;
var thisObj = this;
var options = {
url : url,
data : params,
async : false, //采用同步方式請(qǐng)求
type : 'POST',
dataType : 'json',
error : function(xmlhttp, errInfo, e) { //請(qǐng)求出錯(cuò)處理:如:404等
if (xmlhttp.status == 200) alert('您已經(jīng)很長時(shí)間沒有訪問網(wǎng)站,請(qǐng)退出后重新登陸！');
else alert('請(qǐng)求后臺(tái)服務(wù)時(shí)發(fā)生錯(cuò)誤：' + xmlhttp.status);
},
success : function(data){
//刪除上一次的數(shù)據(jù)
$('#tbody_id'+thisObj.id).children().filter(':gt('+(thisObj.childrenCount-1)+')').remove();
thisObj.pageList(data.data);
thisObj.pageBar(data.total);
if($.isFunction(thisObj.afterQuery)) thisObj.afterQuery();
}
};
if($.isFunction(this.beforeQuery)) this.beforeQuery();
$.ajax(options); //發(fā)送請(qǐng)求
}
this.pageList = function(data){
var filedArr = this.templat.match(/\{[A-Za-z0-9_]+\}/ig);
for(var i = 0;i < data.length;i++){
var thisTemplat = this.templat;
for(var j = 0;j < filedArr.length;j++){
var key = filedArr[j].substring(1,filedArr[j].length-1);
if(key == 'NO_'){ //序號(hào)標(biāo)識(shí)
var value = (this.pageNo-1)*this.pageSize + i + 1;
thisTemplat = thisTemplat.replace(new RegExp('\{'+key+'\}','gm'),value);
}else{
var value = data[i][key];
if(typeof(value) != "undefined" && value == null) value = '';
thisTemplat = thisTemplat.replace(new RegExp('\{'+key+'\}','gm'),value);
}
}
$(thisTemplat).appendTo($('#tbody_id'+this.id));
}
}
this.pageBar = function(total){
var templatObj = $(this.templat);
var delChildren = templatObj.children(':gt(0)');
delChildren.remove();
templatObj.children().attr('colspan',$(this.templat).children().size());
templatObj.children().attr('align','right');
var pageCount;
if(total % this.pageSize == 0) pageCount = total/this.pageSize;
else pageCount = parseInt(total/this.pageSize) + 1;
if(pageCount == 0) pageCount = 1;
var toolbar = "第"+this.pageNo+"/"+pageCount+"頁("+total+"條記錄)";
if(this.pageNo == 1) toolbar = toolbar + " 首頁 上頁";
else toolbar = toolbar + " <a href='' id='firstPage"+this.id+"'>首頁</a> <a href='' id='prePage"+this.id+"'>上頁</a>";
if(this.pageNo == pageCount) toolbar = toolbar + " 下頁 末頁";
else toolbar = toolbar + " <a href='' id='nextPage"+this.id+"'>下頁</a> <a href='' id='lastPage"+this.id+"'>末頁</a>";
toolbar = toolbar + " 每頁<input style='text-align:center;width:25px;height:20px;border:1 solid black' type='text' id='pageSize"+this.id+"' value="+this.pageSize+" />條";
toolbar = toolbar + " <input style='text-align:center;width:25px;height:20px;border:1 solid black' type='text' id='pageNo"+this.id+"' value="+this.pageNo+" />";
toolbar = toolbar + " <input style='height:20px;border:1 solid black' id='goPage"+this.id+"' type='button' value='GO'>";
templatObj.children().html(toolbar);
$(templatObj.wrap("<div></div>").parent().html()).appendTo($('#tbody_id'+this.id));
var thisObj = this;
$('#firstPage'+thisObj.id).click(function(){
thisObj.pageNo = 1;
thisObj.load(thisObj.url,thisObj.params);
return false;
});
$('#prePage'+thisObj.id).click(function(){
thisObj.pageNo = parseInt(thisObj.pageNo) - 1;
thisObj.load(thisObj.url,thisObj.params);
return false;
});
$('#nextPage'+thisObj.id).click(function(){
thisObj.pageNo = parseInt(thisObj.pageNo) + 1;
thisObj.load(thisObj.url,thisObj.params);
return false;
});
$('#lastPage'+thisObj.id).click(function(){
thisObj.pageNo = pageCount;
thisObj.load(thisObj.url,thisObj.params);
return false;
});
$('#pageSize'+thisObj.id).keydown(function(e){
if(e.keyCode==13) {
var v = $('#pageSize'+thisObj.id).val();
if(!isIntGreatZero(v) || v == '0'){
alert('您輸入顯示條數(shù)不合法,請(qǐng)重新輸入!');
$("#pageSize"+thisObj.id).focus();
return;
}
if(v > 200){
alert('您輸入顯示條數(shù)過大了,請(qǐng)重新輸入!');
$("#pageSize"+thisObj.id).focus();
return;
}
thisObj.pageNo = 1;
thisObj.pageSize = v;
thisObj.load(thisObj.url,thisObj.params);
}
});
$('#pageNo'+thisObj.id).keydown(function(e){
if(e.keyCode==13) {
$('#goPage'+thisObj.id).triggerHandler('click');
}
});
$('#goPage'+thisObj.id).click(function(){
var v = $('#pageNo'+thisObj.id).val();
if(!isIntGreatZero(v) || v == '0'){
alert('您輸入頁數(shù)不合法,請(qǐng)重新輸入!');
$("#pageNo"+thisObj.id).focus();
return;
}
if(v > pageCount){
alert('您輸入頁數(shù)大于總頁數(shù),請(qǐng)重新輸入!');
$("#pageNo"+thisObj.id).focus();
return;
}
thisObj.pageNo = v;
thisObj.load(thisObj.url,thisObj.params);
});
}
}
//true if the string is empty
var isEmpty = function(text) {
var isEmpty = true;
for (var i = 0; i < text.length; i++) {
if (text.charAt(i) != ' ') {
isEmpty = false;
break;
}
}
return isEmpty;
}
//true if the string is int and great than zero or equals zero
var isIntGreatZero = function(str) {
if (isEmpty(str))
return false;
var temp1 = true;
var temp2 = '0123456789';
for (var i = 0; i < str.length; i++) {
var c = str.charAt(i);
if (temp2.indexOf(c) == -1) {
temp1 = false;
break;
} else {
if (c == '0' && i == 0 && str.length > 1) {
temp1 = false;
break;
}
}
}
return temp1;
}
相關(guān)文章
Ajax獲取數(shù)據(jù)然后顯示在頁面的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄狝jax獲取數(shù)據(jù)然后顯示在頁面的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08
簡(jiǎn)單實(shí)現(xiàn)ajax三級(jí)聯(lián)動(dòng)效果
這篇文章主要教大家簡(jiǎn)單實(shí)現(xiàn)ajax三級(jí)聯(lián)動(dòng)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10
Ajax中要注意的問題...2007-04-04
這篇文章主要為大家詳細(xì)介紹了Ajax實(shí)現(xiàn)智能提示搜索功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-08-08
kkpager 實(shí)現(xiàn)ajax分頁查詢功能
kkpager 實(shí)現(xiàn)ajax分頁查詢功能，前臺(tái)分頁數(shù)據(jù)，適合數(shù)據(jù)少量的時(shí)候，因?yàn)榉猪摰臄?shù)據(jù)是從后臺(tái)獲取的，大數(shù)據(jù)的話不建議使用 ，具體前后臺(tái)代碼大家參考下本文吧2017-08-08
這篇文章主要介紹了Ajax基礎(chǔ)使用詳解，是前后臺(tái)交互的能? 也就是我們客戶端給服務(wù)端發(fā)送消息的?具，以及接受響應(yīng)的?具，本篇就來對(duì)ajax基礎(chǔ)進(jìn)行詳細(xì)講解,需要的朋友可以參考下2023-05-05
使用ajax和history.pushState無刷新改變頁面URL示例
這篇文章主要介紹了使用ajax和history.pushState無刷新改變頁面URL示例,需要的朋友可以參考下2014-10-10
本文給大家介紹ajax的三種實(shí)現(xiàn)及json解析的相關(guān)資料，對(duì)本文感興趣的朋友參考下2015-12-12
ajax三級(jí)聯(lián)動(dòng)下拉菜單效果
這篇文章主要為大家詳細(xì)介紹了ajax三級(jí)聯(lián)動(dòng)下拉菜單的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
下面小編就為大家?guī)硪黄獪\談Ajax和JavaScript的區(qū)別。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-07