jquery 操作表格实现代码(多种操作打包)
2011-03-20 00:00
991 查看
650) this.width=650;" border=0>
650) this.width=650;" border=0>
代码很简单,在附件中,各位可以下载后直接运行.
<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>
打包下载地址
相关文章推荐
- jquery 操作表格实现代码(多种操作打包)
- jquery获取指定表格的指定列的值 以及 操作radio,checkbox,select表单操作实现代码
- jquery 表格分页等操作实现代码(pagedown,pageup)
- 用jquery代码实现表格行列的增删操作(每行编号随之修改)
- jquery 表格分页等操作实现代码(pagedown,pageup)
- JS小功能(操作Table--动态添加删除表格及数据)实现代码
- JS小功能(操作Table--动态添加删除表格及数据)实现代码
- JQuery 操作select标签实现代码
- jquery表格内容筛选实现思路及代码
- JQuery 操作select标签实现代码
- 用JQuery实现表格隔行变色和突出显示当前行的代码
- JQuery select控件的相关操作实现代码
- jQuery轻松实现表格的隔行变色和点击行变色的实例代码
- jquery操作json数组的实现代码及常用函数
- jQuery select的操作实现代码
- jQuery操作 input type=checkbox的实现代码
- 基于jquery用于查询操作的实现代码
- jquery下json数组的操作实现代码