基于jQuery实现的无刷新表格分页实例_jquery
程序员文章站
2022-05-11 22:14:05
...
本文实例讲述了基于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"),
$tr = $(""),
$th;
for(var i=0;i").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 = $(""),
$tr,
$td;
var tempDaTa = this.paginationFromBeginToEnd(begin,end),
len = tempDaTa.length;
// 循环创建行
for(var i=0;i").appendTo($tbody);
if(i%2==1){
$tr.addClass("evenrow");
}
// 循环创建列 取得对象中的键
for(var key in tempDaTa[i]){
$td = $("").html(tempDaTa[i][key]).appendTo($tr);
}
}
this.tableobj.append($tbody);
}
}
//初始化tfoot
this.showFoot = function(){
var $tfoot = $("
"),
$tr = $(""),
$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 = $("");
oA.attr("href","#1");
oA.html("首页");
$td.append(oA);
//上一页
if(this.currentPageNum>=2){
var oA = $("");
oA.attr("href","#"+(this.currentPageNum - 1));
oA.html("上一页");
$td.append(oA);
}
//普通显示格式
if(this.maxPageNum ");
oA.attr("href","#"+i);
if(this.currentPageNum == i){
oA.attr("class","current");
}
oA.html(i);
$td.append(oA);
}
}else{//超过10页以后（也就是第一组后）
if(this.groupNum");
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 ");
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 = $("");
oA.attr("href","#" + (this.currentPageNum + 1));
oA.html("下一页");
$td.append(oA);
}
//尾页
var oA = $("");
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调用方式：
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》及《jquery常用操作技巧汇总》
希望本文所述对大家jQuery程序设计有所帮助。
声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。
相关文章
相关视频
-
javascript怎么将值类型强制转为字符串
-
javascript中什么是位运算符
-
总结分享： 6 种JavaScript的打断点的方...
-
javascript怎么判断字符串是否是数字
-
基于jQuery实现的无刷新表格分页实例_jque...
-
什么是jquery
-
JavaScript - 测试 jQuery
-
PHP开发 红蓝两方投票功能教程之jQuery
-
PHP开发 发表评论功能教程之jQuery
-
在线代码编辑器:php/html/css/javascript/jQuery
专题推荐
-
独孤九贱-php全栈开发教程全栈 170W+
主讲：Peter-Zhu 轻松幽默、简短易学，非常适合PHP学习入门
-
玉女心经-web前端开发教程入门 80W+
主讲：灭绝师太 由浅入深、明快简洁，非常适合前端学习入门
-
天龙八部-实战开发教程实战 120W+
主讲：西门大官人 思路清晰、严谨规范，适合有一定web编程基础学习
作者信息
- 最新文章
- 热门排行
上一篇： PHPCMS URL规则
网友评论
文明上网理性发言，请遵守 新闻评论服务协议
我要评论