如何为jquery.datatables指定列可以排序

2024-12-27 08:00:22
推荐回答（1个）
回答1：
$(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
   for( var page = 0; page < numPages; page++ )
   {
       //为分页标签加上链接
       $(''+ (page+1) +'')
           .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");  //初始化

});