2014-12-19 26 views
1

我在我的應用程序中使用JQuery表排序器插件(http://tablesorter.com/docs/)它工程很好,但我想排除某些行有N/A的在排序時點擊列並始終保持最後。保持排在某些值總是在底部,而在jquery tablesorter插件排序

據我檢查,如果我們把元素放在tfoot它將永遠留在底部。但是我想只在排序時才顯示這些行,我想在最後移動它們。

下面是我的HTML

<table id="myTable" class="tablesorter"> 
    <thead> 
     <tr> 
      <th>Code</th><th>Name</th><th>Count</th><th>Percentage</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>1011</td><td>Cheif Executives</td><td>2385</td><td>20%</td> 
     </tr> 
     <tr> 
      <td>1012</td><td>General and Operations Manager</td><td>2986</td><td>N/A</td> 
     </tr> 
     <tr> 
      <td>1013</td><td>Advertising Promo Managers</td><td>3412</td><td>30%</td> 
     </tr> 
     <tr> 
      <td>1014</td><td>Marketing Managers</td><td>2154</td><td>5%</td> 
     </tr> 
    </tbody> 
</table> 

的Javascript

在JavaScript中,我們可以指定表分揀文本提取方法。雖然排序越來越低,我正在嘗試將N/A設置爲'',它的ASCII值低於其他符號,因此該行將位於表格的低端。同樣,低到更高的排序我需要用〜符號替換N/A,以使N/A具有更高的值以在末尾出現。

下面的代碼片段我想

$(document).ready(function() { 
      $("#myTable").tablesorter({ 
       textExtraction: function (node) { 
        var s = ''; 
        var hdrs = $("#myTable th"); 
        var direction = ''; 
        hdrs.each(function (index) { 
         if ($(this).hasClass('headerSortDown')) { 
          direction = 'down'; 
          return; 
         } 
         else if ($(this).hasClass('headerSortUp')) { 
          direction = 'up'; 
          return; 
         } 

        }); 
        if (direction === 'down') 
         s = $(node).text().replace('N/A', ' '); 
        else if (direction === 'up') 
         s = $(node).text().replace('N/A', '~'); 
        return s; 
       }, 
       cssAsc: 'headerSortUp', 
       cssDesc: 'headerSortDown' 
      }); 
     }); 

但好像CSS類沒有得到默認添加,因此不預期的結果。我在兩種排序中的預期結果都是行,而代碼1012應始終顯示在表下。

注意我不能添加任何靜態類爲N/A值的表標記,因爲它是從動態生成的表格提前

感謝

回答

4

我很高興,我解決了這個問題我自己也很樂意將此分享給未來可能需要這些的人。這個問題有兩件事

  1. 告訴表分揀機考慮N/A爲空。這可以通過使用textExtraction(方法用於提取從細胞中的值進行排序),該表分揀機提供
  2. 向的tablesorter使用emptyTo屬性

下面是保持所有底部的空值的方法來實現代碼

$(document).ready(function() { 
      $("#myTable").tablesorter({ 
       textExtraction: function (node) { 
        var txt = $(node).text(); 
        txt = txt.replace('N/A', ''); 
        return txt; 
       }, 
       emptyTo: 'bottom' 
      }); 
     }); 
+1

很好的解決方案,但你可以因爲「底」是默認 – emcee22 2015-04-29 09:02:59

+1

非常感謝你刪除emptyTo財產......還,請確保您有最新版本的的tablesorter的。舊版本沒有emptyTo屬性 – Ben 2015-10-09 19:39:21