jquery 操作表格实现代码(多种操作打包)


Posted in Javascript onMarch 20, 2011
jquery 操作表格实现代码(多种操作打包)
 
jquery 操作表格实现代码(多种操作打包)
 
 
代码很简单,在附件中,各位可以下载后直接运行.
<script type="text/javascript" language="javascript"> 
$(function() { 
jQuery.fn.alternateRowColors = function() { //做成插件的形式 
$('tbody tr:odd', this).removeClass('even').addClass('odd'); //隔行变色 奇数行 
$('tbody tr:even', this).removeClass('odd').addClass('even'); //隔行变色 偶数行 
return this; 
}; 
$('table.myTable').each(function() { 
var $table = $(this); //将table存储为一个jquery对象 
$table.alternateRowColors($table); //在排序时隔行变色 
$('th', $table).each(function(column) { 
var findSortKey; 
if ($(this).is('.sort-alpha')) { //按字母排序 
findSortKey = function($cell) { 
return $cell.find('sort-key').text().toUpperCase() + '' + $cell.text().toUpperCase(); 
}; 
} else if ($(this).is('.sort-numeric')) { //按数字排序 
findSortKey = function($cell) { 
var key = parseFloat($cell.text().replace(/^[^\d.]*/, '')); 
return isNaN(key) ? 0 : key; 
}; 
} else if ($(this).is('.sort-date')) { //按日期排序 
findSortKey = function($cell) { 
return Date.parse('1 ' + $cell.text()); 
}; 
} 
if (findSortKey) { 
$(this).addClass('clickable').hover(function() { $(this).addClass('hover'); }, function() { $(this).removeClass('hover'); }).click(function() { 
//反向排序状态声明 
var newDirection = 1; 
if ($(this).is('.sorted-asc')) { 
newDirection = -1; 
} 
var rows = $table.find('tbody>tr').get(); //将数据行转换为数组 
$.each(rows, function(index, row) { 
row.sortKey = findSortKey($(row).children('td').eq(column)); 
}); 
rows.sort(function(a, b) { 
if (a.sortKey < b.sortKey) return -newDirection; 
if (a.sortKey > b.sortKey) return newDirection; 
return 0; 
}); 
$.each(rows, function(index, row) { 
$table.children('tbody').append(row); 
row.sortKey = null; 
}); 
$table.find('th').removeClass('sorted-asc').removeClass('sorted-desc'); 
var $sortHead = $table.find('th').filter(':nth-child(' + (column + 1) + ')'); 
//实现反向排序 
if (newDirection == 1) { 
$sortHead.addClass('sorted-asc'); 
} else { 
$sortHead.addClass('sorted-desc'); 
} 
//调用隔行变色的函数 
$table.alternateRowColors($table); 
//移除已排序的列的样式,添加样式到当前列 
$table.find('td').removeClass('sorted').filter(':nth-child(' + (column + 1) + ')').addClass('sorted'); 
$table.trigger('repaginate'); 
}); 
} 
}); 
}); 
}); 
//分页 
$(function() { 
$('table.paginated').each(function() { 
var currentPage = 0; 
var numPerPage = 10; 
var $table = $(this); 
$table.bind('repaginate', function() { 
$table.find('tbody tr').hide().slice(currentPage * numPerPage, (currentPage + 1) * numPerPage).show(); 
}); 
var numRows = $table.find('tbody tr').length; 
var numPages = Math.ceil(numRows / numPerPage); 
var $pager = $('<div class="pager"></div>'); 
for (var page = 0; page < numPages; page++) { 
$('<span class="page-number"></span>').text(page + 1) 
.bind('click', { newPage: page }, function(event) { 
currentPage = event.data['newPage']; 
$table.trigger('repaginate'); 
$(this).addClass('active').siblings().removeClass('active'); 
}).appendTo($pager).addClass('clickable'); 
} 
$pager.insertBefore($table); 
$table.trigger('repaginate'); 
$pager.find('span.page-number:first').addClass('active'); 
}); 
}); 
</script>

打包下载地址
Javascript 相关文章推荐
一个选择最快的服务器转向代码
Apr 27 Javascript
jquery阻止冒泡事件使用模拟事件
Sep 06 Javascript
JavaScript入门教程之引用类型
May 04 Javascript
js实现select选择框效果及美化
Aug 19 Javascript
微信小程序 配置文件详细介绍
Dec 14 Javascript
使用vue.js实现联动效果的示例代码
Jan 10 Javascript
angularjs的select使用及默认选中设置
Apr 08 Javascript
利用require.js与angular搭建spa应用的方法实例
Jul 19 Javascript
谈谈对vue响应式数据更新的误解
Aug 01 Javascript
JS常用正则表达式超全集(密码强度校验,金额校验,IE版本,IPv4,IPv6校验)
Feb 03 Javascript
Js参数RSA加密传输之jsencrypt.js的使用
Feb 07 Javascript
JS使用for in有序获取对象数据
May 19 Javascript
jQuery实现的Email中的收件人效果(按del键删除)
Mar 20 #Javascript
jquery图片上下tab切换效果
Mar 18 #Javascript
javascript一些实用技巧小结
Mar 18 #Javascript
jquery获取下拉列表的值为null的解决方法
Mar 18 #Javascript
iframe的onload在Chrome/Opera中执行两次Bug的解决方法
Mar 17 #Javascript
javascript定时保存表单数据的代码
Mar 17 #Javascript
eval与window.eval的差别分析
Mar 17 #Javascript
You might like
codeigniter自带数据库类使用方法说明
2014/03/25 PHP
PHP+ajaxfileupload+jcrop插件完美实现头像上传剪裁
2014/06/09 PHP
Laravel 5框架学习之路由、控制器和视图简介
2015/04/07 PHP
yii2带搜索功能的下拉框实例详解
2016/05/12 PHP
Yii2数据库操作常用方法小结
2017/05/04 PHP
浅谈PHP中new self()和new static()的区别
2017/08/11 PHP
yii2中LinkPager增加总页数和总记录数的实例
2017/08/28 PHP
使用 laravel sms 构建短信验证码发送校验功能
2017/11/06 PHP
cnblogs csdn 代码运行框实现代码
2009/11/02 Javascript
javascript针对DOM的应用分析(三)
2012/04/15 Javascript
基于jquery的图片幻灯展示源码
2012/07/15 Javascript
JQuery异步加载无限下拉框级联功能实现示例
2014/02/19 Javascript
基于JavaScript实现动态创建表格和增加表格行数
2015/12/20 Javascript
JS跨域解决方案之使用CORS实现跨域
2016/04/14 Javascript
浅谈DOM的操作以及性能优化问题-重绘重排
2017/01/08 Javascript
H5实现中奖记录逐行滚动切换效果
2017/03/13 Javascript
jquery平滑滚动到顶部插件使用详解
2017/05/08 jQuery
浅谈Vue父子组件和非父子组件传值问题
2017/08/22 Javascript
基于bootstrap写的一点localStorage本地储存
2017/11/21 Javascript
微信小程序如何获取openid及用户信息
2018/01/26 Javascript
详解使用VUE搭建后台管理系统(vue-cli更新至3.0)
2018/08/22 Javascript
webpack4 SCSS提取和懒加载的示例
2018/09/03 Javascript
Vue实现返回顶部按钮实例代码
2020/10/21 Javascript
Vue+element-ui添加自定义右键菜单的方法示例
2020/12/08 Vue.js
Vue 修改网站图标的方法
2020/12/31 Vue.js
python对于requests的封装方法详解
2019/01/03 Python
利用pyecharts实现地图可视化的例子
2019/08/12 Python
python 读txt文件,按‘,’分割每行数据操作
2020/07/05 Python
Theo + George官方网站:都柏林时尚品牌
2019/04/08 全球购物
澳大利亚家用电器在线商店:Billy Guyatts
2020/05/05 全球购物
如何设定的weblogic的热启动模式(开发模式)与产品发布模式
2012/09/08 面试题
《中国梦我的梦》中学生演讲稿
2014/08/20 职场文书
质量保证书格式模板
2015/02/27 职场文书
2015毕业生实习期工作总结
2015/04/09 职场文书
汤姆索亚历险记读书笔记
2015/06/29 职场文书
迎新年主持词
2015/07/06 职场文书