基于jQuery實(shí)現(xiàn)的無(wú)刷新表格分頁(yè)實(shí)例
本文實(shí)例講述了基于jQuery實(shí)現(xiàn)的無(wú)刷新表格分頁(yè)。分享給大家供大家參考,具體如下:
效果圖如下:
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;} /*表格分頁(yè)列表*/ .datatable td.paging a {border: 1px solid #eee; color: #444; margin: 4px; padding: 2px 7px; text-decoration: none; text-align:center;} /*表格分頁(yè)當(dāng)前頁(yè)*/ .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; // 每個(gè)表格都有唯一的一個(gè)id this.tableobj = null; //表格對(duì)象 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)前點(diǎn)擊的行數(shù)據(jù) // --- 通過(guò)表頭來(lái)獲得這張表的列數(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(){}; // --------- 分頁(yè)功能屬性 this.allDataNum = 0; // 總數(shù)據(jù)條數(shù) this.displayNum = 10; // 每頁(yè)顯示條數(shù) this.maxPageNum = 0; // 最大頁(yè)碼值 this.currentPageNum =1;// 當(dāng)前頁(yè)碼值 //tfoot分頁(yè)組 this.groupDataNum = 10; //每組顯示10頁(yè) this.groupNum = 1; //當(dāng)前組 // -------- 分頁(yè)功能行為 this.paginationFromBeginToEnd = function(begin,end){} this.first = function(){}//首頁(yè) this.last = function(){}//最后一頁(yè) this.prev = function(){}//上一頁(yè) this.next = function(){}//下一頁(yè) this.goto = function(){} //跳到某頁(yè) // ----------- 表格初始化 this.init = function(begin,end){} } /* 表格對(duì)象模板 */ function tableTemplet(table_id){ abstractTable.call(this); this.id = table_id; } /** * 表格對(duì)象 * @param options */ function table(options){ if(!options){return;} if(!$.isPlainObject(options)){return;} tableTemplet.call(this,options.tableId); //得到表格對(duì)象 this.tableobj = $("#"+this.id); //清空表格內(nèi)容 this.clearTable = function(){ this.tableobj.html(" "); } // 實(shí)現(xiàn)分頁(yè)行為 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)建列 取得對(duì)象中的鍵 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); } //表格分頁(yè) this.pagination = function(tdCell){ var $td= typeof(tdCell) == "object" ? tdCell : $("#" + tdCell); //首頁(yè) var oA = $("<a/>"); oA.attr("href","#1"); oA.html("首頁(yè)"); $td.append(oA); //上一頁(yè) if(this.currentPageNum>=2){ var oA = $("<a/>"); oA.attr("href","#"+(this.currentPageNum - 1)); oA.html("上一頁(yè)"); $td.append(oA); } //普通顯示格式 if(this.maxPageNum <= this.groupDataNum){ // 10頁(yè)以?xún)?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{//超過(guò)10頁(yè)以后(也就是第一組后) 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); } } } //下一頁(yè) if( (this.maxPageNum - this.currentPageNum) >= 1 ){ var oA = $("<a/>"); oA.attr("href","#" + (this.currentPageNum + 1)); oA.html("下一頁(yè)"); $td.append(oA); } //尾頁(yè) var oA = $("<a/>"); oA.attr("href","#" + this.maxPageNum); oA.html("尾頁(yè)"); $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){//直接點(diǎn)擊尾頁(yè) 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":["序號(hào)","姓名","性別","年齡","地址"], //必須 "data":data, //必須 "displayNum": 6, //必須 默認(rèn) 10 "groupDataNum":9 //可選 默認(rèn) 10 }); </script>
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題:《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見(jiàn)經(jīng)典特效匯總》、《jQuery常用插件及用法總結(jié)》、《jquery中Ajax用法總結(jié)》及《jquery常用操作技巧匯總》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
- 基于Jquery實(shí)現(xiàn)表格動(dòng)態(tài)分頁(yè)實(shí)現(xiàn)代碼
- 基于jquery實(shí)現(xiàn)的表格分頁(yè)實(shí)現(xiàn)代碼
- JQuery頁(yè)面的表格數(shù)據(jù)的增加與分頁(yè)的實(shí)現(xiàn)
- jquery 表格分頁(yè)等操作實(shí)現(xiàn)代碼(pagedown,pageup)
- 擴(kuò)展jquery實(shí)現(xiàn)客戶(hù)端表格的分頁(yè)、排序功能代碼
- 基于jquery實(shí)現(xiàn)表格無(wú)刷新分頁(yè)
- jQuery給表格添加分頁(yè)效果
- 利用jQuery實(shí)現(xiàn)一個(gè)簡(jiǎn)單的表格上下翻頁(yè)效果
相關(guān)文章
jquery表格datatables實(shí)例解析 直接加載和延遲加載
這篇文章主要針對(duì)jquery表格datatables實(shí)例進(jìn)行解析,可以直接加載和延遲加載,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-08-08jquery-ui 進(jìn)度條功能示例【測(cè)試可用】
這篇文章主要介紹了jquery-ui 進(jìn)度條功能,結(jié)合完整實(shí)例形式分析了jquery-ui 結(jié)合時(shí)間函數(shù)實(shí)現(xiàn)進(jìn)度條功能相關(guān)操作技巧,需要的朋友可以參考下2019-07-07解決JQeury顯示內(nèi)容沒(méi)有邊距內(nèi)容緊挨著瀏覽器邊線(xiàn)
JQuery頁(yè)面顯示的內(nèi)容沒(méi)有邊距,內(nèi)容緊挨著瀏覽器邊線(xiàn),下面有個(gè)不錯(cuò)的解決方法,大家可以嘗試下2013-12-12jQuery實(shí)現(xiàn)動(dòng)態(tài)添加標(biāo)簽事件
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)動(dòng)態(tài)添加標(biāo)簽事件,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-08-08jQuery實(shí)現(xiàn)帶動(dòng)畫(huà)效果的多級(jí)下拉菜單代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)帶動(dòng)畫(huà)效果的多級(jí)下拉菜單代碼,可實(shí)現(xiàn)點(diǎn)擊漸隱漸顯效果,涉及jQuery頁(yè)面元素的遍歷及鏈?zhǔn)讲僮飨嚓P(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09Javascript函數(shù)中的arguments.callee用法實(shí)例分析
這篇文章主要介紹了Javascript函數(shù)中的arguments.callee用法,結(jié)合實(shí)例形式分析了arguments.callee操作當(dāng)前方法引用的具體技巧,需要的朋友可以參考下2016-09-09基于jQuery傾斜打開(kāi)側(cè)邊欄菜單特效代碼
基于jQuery多重圖片無(wú)限循環(huán)動(dòng)畫(huà)效果,本文給大家分享基于jQuery傾斜打開(kāi)側(cè)邊欄菜單特效代碼,感興趣的朋友可以參考下2015-09-09Jquery+CSS 創(chuàng)建流動(dòng)導(dǎo)航菜單 Fluid Navigation
有時(shí),一個(gè)網(wǎng)站的導(dǎo)航菜單文字不能提供足夠的信息,來(lái)表達(dá)當(dāng)前菜單按鈕的內(nèi)容,一般的解決辦法是使用提示信息ToolTip,那么本文介紹的流動(dòng)導(dǎo)航菜單Fluid Navigation也可以解決此問(wèn)題,同時(shí)也為網(wǎng)站設(shè)計(jì)的添加了一些時(shí)尚而又動(dòng)感元素。2010-02-02