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 相关文章推荐
很全的显示阴历(农历)日期的js代码
Jan 01 Javascript
node.js中的path.basename方法使用说明
Dec 09 Javascript
jQuery UI库中dialog对话框功能使用全解析
Apr 23 Javascript
jQuery中实现prop()函数控制多选框(全选,反选)
Aug 19 Javascript
BootstrapValidator不触发校验的实现代码
Sep 28 Javascript
Angularjs根据json文件动态生成路由状态的实现方法
Apr 17 Javascript
vue todo-list组件发布到npm上的方法
Apr 04 Javascript
js中实例与对象的区别讲解
Jan 21 Javascript
详解JS实现简单的时分秒倒计时代码
Apr 25 Javascript
如何使用CSS3+JQuery实现悬浮墙式菜单
Jun 18 jQuery
在Layui中实现开关按钮的效果实例
Sep 29 Javascript
vue实现一个6个输入框的验证码输入组件功能的实例代码
Jun 29 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
PHP实现的一致性哈希算法完整实例
2015/11/14 PHP
jquery全选/全不选/反选另一种实现方法(配合原生js)
2013/04/07 Javascript
JS防止用户多次提交的简单代码
2013/08/01 Javascript
Bootstrap table分页问题汇总
2016/05/30 Javascript
JS跨域交互(jQuery+php)之jsonp使用心得
2016/07/01 Javascript
JS获取多维数组中相同键的值实现方法示例
2017/01/06 Javascript
新闻上下滚动jquery 超简洁(必看篇)
2017/01/21 Javascript
js+canvas实现动态吃豆人效果
2017/03/22 Javascript
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
2017/09/23 jQuery
vue element-ui table表格滚动加载方法
2018/03/02 Javascript
微信小程序实现时间进度条功能
2020/11/17 Javascript
解决vue的touchStart事件及click事件冲突问题
2020/07/21 Javascript
JS实现页面鼠标点击出现图片特效
2020/08/19 Javascript
使用Python的PEAK来适配协议的教程
2015/04/14 Python
python简单实现计算过期时间的方法
2015/06/09 Python
Python实现感知机(PLA)算法
2017/12/20 Python
Python2包含中文报错的解决方法
2018/07/09 Python
python MNIST手写识别数据调用API的方法
2018/08/08 Python
python对文件的操作方法汇总
2020/02/28 Python
QML用PathView实现轮播图
2020/06/03 Python
python图片合成的示例
2020/11/09 Python
python excel多行合并的方法
2020/12/09 Python
你不知道的葡萄干处理法、橙蜜处理法、二氧化碳酵母法
2021/03/17 冲泡冲煮
html5 canvas实现给图片添加平铺水印
2019/08/20 HTML / CSS
网上常见的一份Linux面试题(多项选择部分)
2014/09/09 面试题
成人毕业生自我鉴定
2013/10/18 职场文书
生物医学工程专业学生求职信范文分享
2013/12/14 职场文书
导游的职业规划书范文
2013/12/27 职场文书
机械制造专业个人的自我评价
2013/12/28 职场文书
县委务虚会发言材料
2014/10/20 职场文书
2014年小学数学教师工作总结
2014/12/03 职场文书
小学五一劳动节活动总结
2015/02/09 职场文书
礼貌问候语大全
2015/11/10 职场文书
mysql 带多个条件的查询方式
2021/06/05 MySQL
深入理解 Golang 的字符串
2022/05/04 Golang
JavaScript正则表达式实现注册信息校验功能
2022/05/30 Java/Android