基于基于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; // 每个表格都有唯一的一个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(){};
// --------- 分页功能属性