基于jQuery实现的无刷新表格分页实例

本文实例讲述了基于jQuery实现的无刷新表格分页。分享给大家供大家参考，具体如下：
效果图如下：

html结构：

<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;}/*表格分页当前页*/.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（）{// ---------内容属性this.id = null; // 每个表格都有唯一的一个idthis.tableobj = null; //表格对象this.rowNum = 0;//行数this.colNum = 0; //列数this.header = []; //表头数据this.content = [];//body数据// ----------提供外部使用获得表格内部数据this.currentClickRowID = 0;//当前点击的行数据// --- 通过表头来获得这张表的列数this.getColNum = function（）{this.colNum = this.header.length;returnthis.colNum;}// ----------- 表格自我构建行为this.clearTable = function（）{};this.showHeader = function（）{};this.showContent = function（begin,end）{};this.showFoot = function（）{};// --------- 分页功能属性this.allDataNum = 0; // 总数据条数this.displayNum = 10; // 每页显示条数this.maxPageNum = 0; // 最大页码值this.currentPageNum =1;// 当前页码值//tfoot分页组this.groupDataNum = 10; //每组显示10页this.groupNum = 1;//当前组// -------- 分页功能行为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）;//清空表格内容this.clearTable = function（）{this.tableobj.html（" "）;}// 实现分页行为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）}}//初始化tbodythis.showContent = function（begin,end）{if（this.content ！= null）{var $tbody = $（"<tbody>"）,$tr,$td;var tempDaTa = this.paginationFromBeginToEnd（begin,end）,len = tempDaTa.length;// 循环创建行for（var i=0;i<len;i++）{$tr = $（"<tr>"）.appendTo（$tbody）;if（i%2==1）{$tr.addClass（"evenrow"）;}// 循环创建列 取得对象中的键for（var key in tempDaTa[i]）{$td = $（"<td>"）.html（tempDaTa[i][key]）.appendTo（$tr）;}}this.tableobj.append（$tbody）;}}//初始化tfootthis.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页以内 为一组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）;}

调用方式：

<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>

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》及《jquery常用操作技巧汇总》
希望本文所述对大家jQuery程序设计有所帮助。