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

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; // 每个表格都有唯一的一个id this.tableobj = null; //表格对象 this.rownum = 0; //行数 this.colnum = 0; //列数 this.header = []; //表头数据 this.content = []; //body数据 // ----------提供外部使用获得表格内部数据 this.currentclickrowid = 0; //当前点击的行数据 // --- 通过表头来获得这张表的列数 this.getcolnum = function(){ this.colnum = this.header.length; return this.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=maxgroupnum){ tempthis.groupnum = maxgroupnum; } } } if(nownum 调用方式：

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