$(document).ready(function() { //插件的形式 jQuery.fn.alterRowColors = function() { $('tbody tr:odd', this).removeClass('even').addClass('odd'); $('tbody tr:even', this).removeClass('odd').addClass('even'); return this; } //1.此时的函数是作为jQuery.fn的一个新属性定义的,不是孤立的函数,这样就把该函数注册成了一个插件, //2.使用关键字this,在一个插件内部,this表示的是调用该插件的jQuery对象, //3.最后在函数的末尾返回this,返回这个值可以使这个新方法能够继续连缀其他的方法。 var $sortOrder = 0; //排序类型 1表示升序,0表示降序 var $table = $('table#shop'); $table.alterRowColors(); $('th', $table).each(function( column ) { //处理三种有可能存在的排序字段,比较方法 var findSortKey; if( $(this).is('.sort-title') || $(this).is('.sort-author') ) { findSortKey = function( $cell ) { return $cell.find('.sort-title').text().toUpperCase()+ '' +$cell.text().toUpperCase(); } } else if( $(this).is('.sort-date') ) { findSortKey = function( $cell ) { return Date.parse('1' + $cell.text()); } } else if( $(this).is('.sort-price') ) { findSortKey = function( $cell ) { var key = parseFloat($cell.text().replace(/^[^/d.]*/, '')) return isNaN(key) ? 0 : key; } } //排序 if( findSortKey ) { $(this).addClass('clickable').hover(function() { $(this).addClass('hover'); var $title = $sortOrder == 0 ? '升序' : '降序'; $(this).attr('title', '按'+ $(this).html() + $title +'排列'); }, function() { $(this).removeClass('hover'); }).click(function() { $sortOrder = $sortOrder == 0 ? 1 : 0; 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( $sortOrder == 1 ) { //升序 if(a.sortKey < b.sortKey) return -1; if(a.sortKey > b.sortKey) return 1; return 0; } else { //降序 if(a.sortKey < b.sortKey) return 1; if(a.sortKey > b.sortKey) return -1; return 0; } }); //排序后的对象添加给$table $.each( rows, function( index, row ) { $table.children('tbody').append(row); row.sortKey = null; }); //显著标明是通过某一列排序的 $table.find('td').removeClass('sorted') .filter(':nth-child('+ (column + 1) +')').addClass('sorted'); //重新赋予奇偶行的样式 $table.alterRowColors(); }); } }); //分页效果 var currentPage = 0; //当前页 var pageSize = 10; //每页行数(不包括表头) //绑定分页事件 $table.bind('repaginate', function() { $table.find('tbody tr').hide() .slice(currentPage * pageSize, (currentPage + 1) * pageSize).show(); }); var numRows = $table.find('tbody tr').length; //记录宗条数 var numPages = Math.ceil(numRows/pageSize); //总页数 var $pager = $('<div class="page"></div>'); //分页div for( var page = 0; page < numPages; page++ ) { //为分页标签加上链接 $('<a href="#" ><span>'+ (page+1) +'</span></a>') .bind("click", { "newPage": page }, function(event) { currentPage = event.data["newPage"]; $table.trigger("repaginate"); }) .appendTo($pager); $pager.append(" "); } $pager.insertAfter($table); //分页div插入table $table.trigger("repaginate"); //初始化 });