基于jQuery實現(xiàn)的無刷新表格分頁實例
更新時間：2016年02月17日 11:53:38 作者：The-duke
這篇文章主要介紹了基于jQuery實現(xiàn)的無刷新表格分頁方法,結(jié)合完整實例形式較為詳細的分析了jQuery實現(xiàn)無刷新表格分頁的具體步驟與相關(guān)實現(xiàn)代碼,需要的朋友可以參考下
本文實例講述了基于jQuery實現(xiàn)的無刷新表格分頁。分享給大家供大家參考，具體如下：
效果圖如下：
html結(jié)構(gòu)：
<table id="cs_table" class="datatable"></table>
css樣式：
html,body{margin: 0;padding:0}
a:focus {outline: none;}
/* 通用表格顯示 */
table, th, td {font: 12px Arial,Helvetica,sans-serif,'宋體';margin: 0;padding: 0}
table{border-spacing: 0;border-collapse: collapse;}
.datatable {width: 100%;border-style: none;background-color: #fff;margin-bottom: 20px;text-align: left;}
.datatable th, .datatable td { padding: 5px;line-height: 30px}
.datatable thead th {background-color: #eee;margin: 0;text-align: left;border-top: 1px solid #cfcfcf;border-bottom: 1px solid #cfcfcf;font-weight: 500}
.datatable tbody td {background-color: #fff;border-bottom: 1px solid #ddd;table-layout:fixed;word-break:break-all;font-weight: 400}
.datatable tbody tr.evenrow td {background-color: #f4f4f4;}
.datatable tfoot td {background-color: #fafafa;text-align: right;border-bottom: 1px solid #cfcfcf;}
/*表格分頁列表*/
.datatable td.paging a {border: 1px solid #eee; color: #444; margin: 4px; padding: 2px 7px; text-decoration: none; text-align:center;}
/*表格分頁當(dāng)前頁*/
.datatable td.paging a.current {background: #eee; border: 1px solid #CFCFCF; color: #444; font-weight: bold;}
.datatable td.paging a.current{border: 0;cursor: auto;background:none}
javascript封裝代碼：
/**
* 抽象化表格
*/
function abstractTable(){
// ---------內(nèi)容屬性
this.id = null; // 每個表格都有唯一的一個id
this.tableobj = null; //表格對象
this.rowNum = 0; //行數(shù)
this.colNum = 0; //列數(shù)
this.header = []; //表頭數(shù)據(jù)
this.content = []; //body數(shù)據(jù)
// ----------提供外部使用獲得表格內(nèi)部數(shù)據(jù)
this.currentClickRowID = 0; //當(dāng)前點擊的行數(shù)據(jù)
// --- 通過表頭來獲得這張表的列數(shù)
this.getColNum = function(){
this.colNum = this.header.length;
return this.colNum;
}
// ----------- 表格自我構(gòu)建行為
this.clearTable = function(){};
this.showHeader = function(){};
this.showContent = function(begin,end){};
this.showFoot = function(){};
// --------- 分頁功能屬性
this.allDataNum = 0; // 總數(shù)據(jù)條數(shù)
this.displayNum = 10; // 每頁顯示條數(shù)
this.maxPageNum = 0; // 最大頁碼值
this.currentPageNum =1;// 當(dāng)前頁碼值
//tfoot分頁組
this.groupDataNum = 10; //每組顯示10頁
this.groupNum = 1; //當(dāng)前組
// -------- 分頁功能行為
this.paginationFromBeginToEnd = function(begin,end){}
this.first = function(){}//首頁
this.last = function(){}//最后一頁
this.prev = function(){}//上一頁
this.next = function(){}//下一頁
this.goto = function(){} //跳到某頁
// ----------- 表格初始化
this.init = function(begin,end){}
}
/*
表格對象模板
*/
function tableTemplet(table_id){
abstractTable.call(this);
this.id = table_id;
}
/**
* 表格對象
* @param options
*/
function table(options){
if(!options){return;}
if(!$.isPlainObject(options)){return;}
tableTemplet.call(this,options.tableId);
//得到表格對象
this.tableobj = $("#"+this.id);
//清空表格內(nèi)容
this.clearTable = function(){
this.tableobj.html(" ");
}
// 實現(xiàn)分頁行為
this.paginationFromBeginToEnd= function(x,y){
this.maxPageNum = Math.ceil(this.allDataNum/this.displayNum);
var arrPage = [];
for(var i= x;i<y;i++){
arrPage.push(this.content[i]);
}
return arrPage;
}
this.showHeader = function(){
if(this.header != null){
var $thead = $("<thead>"),
$tr = $("<tr>"),
$th;
for(var i=0;i<this.colNum;i++){
$th = $("<th>").html(this.header[i]);
$th.appendTo($tr);
}
$tr.appendTo($thead);
$thead.appendTo(this.tableobj)
}
}
//初始化tbody
this.showContent = function(begin,end){
if(this.content != null){
var $tbody = $("<tbody>"),
$tr,
$td;
var tempDaTa = this.paginationFromBeginToEnd(begin,end),
len = tempDaTa.length;
// 循環(huán)創(chuàng)建行
for(var i=0;i<len;i++){
$tr = $("<tr>").appendTo($tbody);
if(i%2==1){
$tr.addClass("evenrow");
}
// 循環(huán)創(chuàng)建列 取得對象中的鍵
for(var key in tempDaTa[i]){
$td = $("<td>").html(tempDaTa[i][key]).appendTo($tr);
}
}
this.tableobj.append($tbody);
}
}
//初始化tfoot
this.showFoot = function(){
var $tfoot = $("<tfoot>"),
$tr = $("<tr>"),
$td = $("<td>").attr("colspan",this.colNum).addClass("paging");
$tr.append($td);
$tfoot.append($tr);
this.tableobj.append($tfoot);
this.pagination($td);
}
//表格分頁
this.pagination = function(tdCell){
var $td= typeof(tdCell) == "object" ? tdCell : $("#" + tdCell);
//首頁
var oA = $("<a/>");
oA.attr("href","#1");
oA.html("首頁");
$td.append(oA);
//上一頁
if(this.currentPageNum>=2){
var oA = $("<a/>");
oA.attr("href","#"+(this.currentPageNum - 1));
oA.html("上一頁");
$td.append(oA);
}
//普通顯示格式
if(this.maxPageNum <= this.groupDataNum){ // 10頁以內(nèi) 為一組
for(var i = 1;i <= this.maxPageNum ;i++){
var oA = $("<a/>");
oA.attr("href","#"+i);
if(this.currentPageNum == i){
oA.attr("class","current");
}
oA.html(i);
$td.append(oA);
}
}else{//超過10頁以后（也就是第一組后）
if(this.groupNum<=1){//第一組顯示
for(var j = 1;j <= this.groupDataNum ;j++){
var oA = $("<a/>");
oA.attr("href","#"+j);
if(this.currentPageNum == j){
oA.attr("class","current");
}
oA.html(j);
$td.append(oA);
}
}else{//第二組后面的顯示
var begin = (this.groupDataNum*(this.groupNum-1))+ 1,
end ,
maxGroupNum = Math.ceil(this.maxPageNum/this.groupDataNum);
if(this.maxPageNum%this.groupDataNum!=0&&this.groupNum==maxGroupNum){
end = this.groupDataNum*(this.groupNum-1)+this.maxPageNum%this.groupDataNum
}else{
end = this.groupDataNum*(this.groupNum);
}
for(var j = begin;j <= end ;j++){
var oA = $("<a/>");
oA.attr("href","#"+j);
if(this.currentPageNum == j){
oA.attr("class","current");
}
oA.html(j);
$td.append(oA);
}
}
}
//下一頁
if( (this.maxPageNum - this.currentPageNum) >= 1 ){
var oA = $("<a/>");
oA.attr("href","#" + (this.currentPageNum + 1));
oA.html("下一頁");
$td.append(oA);
}
//尾頁
var oA = $("<a/>");
oA.attr("href","#" + this.maxPageNum);
oA.html("尾頁");
$td.append(oA);
var page_a = $td.find('a');
var tempThis = this;
page_a.unbind("click").bind("click",function(){
var nowNum = parseInt($(this).attr('href').substring(1));
if(nowNum>tempThis.currentPageNum){//下一組
if(tempThis.currentPageNum%tempThis.groupDataNum==0){
tempThis.groupNum += 1;
var maxGroupNum = Math.ceil(tempThis.maxPageNum/tempThis.groupDataNum);
if(tempThis.groupNum>=maxGroupNum){
tempThis.groupNum = maxGroupNum;
}
}
}
if(nowNum<tempThis.currentPageNum){//上一組
if((tempThis.currentPageNum-1)%tempThis.groupDataNum==0){
tempThis.groupNum -= 1;
if(tempThis.groupNum<=1){
tempThis.groupNum = 1;
}
}
}
if(nowNum==tempThis.maxPageNum){//直接點擊尾頁
var maxGroupNum = Math.ceil(tempThis.maxPageNum/tempThis.groupDataNum);
tempThis.groupNum = maxGroupNum;
}
if(nowNum==1){
var maxGroupNum = Math.ceil(tempThis.maxPageNum/tempThis.groupDataNum);
tempThis.groupNum = 1;
}
tempThis.currentPageNum = nowNum;
tempThis.init((tempThis.currentPageNum-1)*tempThis.displayNum,
tempThis.currentPageNum*tempThis.displayNum);
return false;
});
}
//初始化
this.init = function(begin,end){
this.header = options.headers;
this.colNum = this.header.length;
this.content = options.data;
this.allDataNum = this.content.length;
if(options.displayNum){
this.displayNum = options.displayNum;
}
if(options.groupDataNum){
this.groupDataNum = options.groupDataNum;
}
this.clearTable();
this.showHeader();
this.showContent(begin,end);
this.showFoot();
}
this.init(0,options.displayNum);
}
調(diào)用方式：
<script type="text/javascript">
var data = [];
for(var i=0;i<334;i++){
data[i] = {id:i+1,name:"jason"+(i+1),gender:"男",age:26,address:"成都"};
}
var cs = new table({
"tableId":"cs_table", //必須
"headers":["序號","姓名","性別","年齡","地址"], //必須
"data":data, //必須
"displayNum": 6, //必須 默認 10
"groupDataNum":9 //可選 默認 10
});
</script>
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery擴展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery常用插件及用法總結(jié)》、《jquery中Ajax用法總結(jié)》及《jquery常用操作技巧匯總》
希望本文所述對大家jQuery程序設(shè)計有所幫助。
相關(guān)文章
jquery表格datatables實例解析 直接加載和延遲加載
這篇文章主要針對jquery表格datatables實例進行解析，可以直接加載和延遲加載，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-08-08
這篇文章主要介紹了深入了解query和params的使用區(qū)別，路由傳參的時候，有倆兄弟，一個叫query，一個叫parmas，你說他們倆長得也不像吧，可這用法實在是太類似了，下面就讓我們分別從vue路由和Node接收兩個角度講他們的區(qū)別,需要的朋友可以參考下2019-06-06
這篇文章主要介紹了jquery-ui 進度條功能,結(jié)合完整實例形式分析了jquery-ui 結(jié)合時間函數(shù)實現(xiàn)進度條功能相關(guān)操作技巧,需要的朋友可以參考下2019-07-07
解決JQeury顯示內(nèi)容沒有邊距內(nèi)容緊挨著瀏覽器邊線
JQuery頁面顯示的內(nèi)容沒有邊距，內(nèi)容緊挨著瀏覽器邊線，下面有個不錯的解決方法，大家可以嘗試下2013-12-12
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)動態(tài)添加標簽事件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要介紹了jQuery實現(xiàn)帶動畫效果的多級下拉菜單代碼,可實現(xiàn)點擊漸隱漸顯效果,涉及jQuery頁面元素的遍歷及鏈式操作相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09
Javascript函數(shù)中的arguments.callee用法實例分析
這篇文章主要介紹了Javascript函數(shù)中的arguments.callee用法,結(jié)合實例形式分析了arguments.callee操作當(dāng)前方法引用的具體技巧,需要的朋友可以參考下2016-09-09
基于jQuery多重圖片無限循環(huán)動畫效果，本文給大家分享基于jQuery傾斜打開側(cè)邊欄菜單特效代碼，感興趣的朋友可以參考下2015-09-09
Jquery+CSS 創(chuàng)建流動導(dǎo)航菜單 Fluid Navigation
有時，一個網(wǎng)站的導(dǎo)航菜單文字不能提供足夠的信息，來表達當(dāng)前菜單按鈕的內(nèi)容，一般的解決辦法是使用提示信息ToolTip，那么本文介紹的流動導(dǎo)航菜單Fluid Navigation也可以解決此問題，同時也為網(wǎng)站設(shè)計的添加了一些時尚而又動感元素。2010-02-02
基于jquery獲取指定樣式的參數(shù)信息。2010-07-07