TableSorter自定義分析器沒有在Chrome上正確排序

我正在嘗試爲TableSorter編寫一個自定義分析器，它將允許我在HTML5表中的幾個標題之間動態地對字母分級進行排序。我瘋狂搜索，無法找到一個已經完成的例子。TableSorter自定義分析器沒有在Chrome上正確排序

我對此很陌生，但認爲這對於做課堂排序，質量保證報告等可能非常有幫助。在這裏，我將Free2Work品牌的排名整理到我可以在智能手機上使用的東西。

至少有兩個問題在這裏：

我得到了一個在Firefox的工作，但是當我在Chrome加載排序隨機出現。我確信我在某個地方將錯誤的東西加載到數組中，但我不確定它是什麼。
「評級」列在Firefox中正確排序，但看起來其他列不是。所有列都使用相同的解析器。

這裏是JavaScript的我使用：

 $.tablesorter.addParser({ 
      id: 'grades', 
      is: function(s) { 
        return false; 
      }, 
      format: function(s) { 
        // format your data for normalization 
        return s.toLowerCase() 
          .replace("a+",12) 
          .replace("a",11) 
          .replace("a-",10) 
          .replace("b+",09) 
          .replace("b",08) 
          .replace("b-",07) 
          .replace("c+",06) 
          .replace("c",05) 
          .replace("c-",04) 
          .replace("d+",03) 
          .replace("d",02) 
          .replace("d-",01) 
          .replace("f",00); 
      }, 
      type: 'numeric' 
    }); 

    $(function() { 
      $('#brands').tablesorter({ 
        headers: { 
          2: {sorter:'grades'}, 
          3: {sorter:'grades'}, 
          4: {sorter:'grades'}, 
          5: {sorter:'grades'}, 
          6: {sorter:'grades'} 
        } 
      }); 
    });

而這裏的[截斷] HTML。

<table id="brands" class="tablesorter table striped"> 
    <caption> 
     Brand Ratings 
    </caption> 
    <thead> 
     <tr> 
      <th>Logo</th> 
      <th>Brand</th> 
      <th class="extractor-select sorter-grades">Rating</th> 
      <th class="extractor-select sorter-grades">Policy</th> 
      <th class="extractor-select sorter-grades">Honesty</th> 
      <th class="extractor-select sorter-grades">Monitor</th> 
      <th class="extractor-select sorter-grades">Workers</th> 
      <th>More</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td class="brand-logo"></td> 
      <td class="brand-name">Etiko</td> 
      <td class="brand-overall-grade aplus">A+</td> 
      <td class="aplus">A+</td> 
      <td class="aplus">A+</td> 
      <td class="a">A</td> 
      <td class="aplus">A+</td> 
      <td class="score-card-button"> 
       <a href="http://widgets.free2work.org/frontend_ratings/public_view/1268">Scorecard</a> 
      </td> 
     </tr> 
     <tr> 
      <td class="brand-logo"></td> 
      <td class="brand-name">Pants to Poverty</td> 
      <td class="brand-overall-grade aplus">A+</td> 
      <td class="aplus">A+</td> 
      <td class="aplus">A+</td> 
      <td class="a">A</td> 
      <td class="aplus">A+</td> 
      <td class="score-card-button"> 
       <a href="http://widgets.free2work.org/frontend_ratings/public_view/1270">Scorecard</a> 
      </td> 
     </tr> 
     <tr> 
      <td class="brand-logo"><img src="http://widgets.free2work.org/images/Brand/playtex_logo_black0.jpg"></td> 
      <td class="brand-name">Playtex</td> 
      <td class="brand-overall-grade a">A</td> 
      <td class="aminus">A-</td> 
      <td class="a">A</td> 
      <td class="a">A</td> 
      <td class="aminus">A-</td> 
      <td class="score-card-button"> 
       <a href="http://widgets.free2work.org/frontend_ratings/public_view/458">Scorecard</a> 
      </td> 
     </tr> 
     <tr> 
      <td class="brand-logo"><img src="http://widgets.free2work.org/images/Brand/Hanes_Logo0.jpg"></td> 
      <td class="brand-name">Hanes</td> 
      <td class="brand-overall-grade a">A</td> 
      <td class="aminus">A-</td> 
      <td class="a">A</td> 
      <td class="a">A</td> 
      <td class="aminus">A-</td> 
      <td class="score-card-button"> 
       <a href="http://widgets.free2work.org/frontend_ratings/public_view/456">Scorecard</a> 
      </td> 
     </tr> 
     <tr> 
      <td class="brand-logo"></td> 
      <td class="brand-name">Voodoo Hosiery</td> 
      <td class="brand-overall-grade b">B</td> 
      <td class="aminus">A-</td> 
      <td class="bminus">B-</td> 
      <td class="b">B</td> 
      <td class="d">D</td> 
      <td class="score-card-button"> 
       <a href="http://widgets.free2work.org/frontend_ratings/public_view/1077">Scorecard</a> 
      </td> 
     </tr> 
     <tr> 
      <td class="brand-logo"><img src="http://widgets.free2work.org/images/Brand/AmericanBodyArmor0.jpg"></td> 
      <td class="brand-name">American Body Armor</td> 
      <td class="brand-overall-grade f">F</td> 
      <td class="f">F</td> 
      <td class="f">F</td> 
      <td class="f">F</td> 
      <td class="f">F</td> 
      <td class="score-card-button"> 
       <a href="http://widgets.free2work.org/frontend_ratings/public_view/750">Scorecard</a> 
      </td> 
     </tr> 
    </tbody> 
</table>

任何人有任何見解，我怎麼會在這裏misconstructed什麼？我有點過頭了。

來源

2015-12-17 LoneStar

這是一個小提琴，如果任何人有興趣：https：//jsfiddle.net/01eL3a6w/1/ – LoneStar

看來演示使用了兩個版本的tablesorter，包括在javascript框架中的original tablesorter（v2.0.5）（從底部）和我的fork of tablesorter從CDN加載。它們都使用相同的解析器代碼，所以這不是問題。

但是，有兩個問題與自定義分析器代碼（fixed demo）：

當更換完成後，它是由一個數字（數值）所取代，但它實際上還是一個字符串。所以我用引號將值包住，否則前導零將被刪除。這對於使用自然排序的tablesorter的叉來說並不是問題，但是原始使用的標準排序不會像您期望的那樣對字符串中的數字進行排序。
因爲我們實際上是在處理字符串，解析器類型需要更改爲「文本」

這裏是一個更新的解析器cdoe：

$.tablesorter.addParser({ 
    id: 'grades', 
    is: function(s) { 
    return false; 
    }, 
    format: function(s) { 
    // format your data for normalization 
    return s.toLowerCase() 
     .replace("a+", '12') 
     .replace("a", '11') 
     .replace("a-", '10') 
     .replace("b+", '09') 
     .replace("b", '08') 
     .replace("b-", '07') 
     .replace("c+", '06') 
     .replace("c", '05') 
     .replace("c-", '04') 
     .replace("d+", '03') 
     .replace("d", '02') 
     .replace("d-", '01') 
     .replace("f", '00'); 
    }, 
    type: 'text' 
});

另一種方法，這不需要設置數字值，將值添加到數組，然後使用indexOf（或jQuery $.inArray，如果您需要支持舊IE）來獲取該位置。這解析器將是一個「數字」型（demo）

// put grades outside of the format function, so the split 
// only needs to happen once 
var grades = 'a+ a a- b+ b b- c+ c c- d+ d d- f'.split(' '); 

$.tablesorter.addParser({ 
    id: 'grades', 
    is: function(s) { 
     return false; 
    }, 
    format: function(s) { 
    var val = $.inArray((s || '').toLowerCase(), grades); 
    // return string if it isn't a grade (to allow sorting) 
    return val > -1 ? val : s; 
    }, 
    type: 'numeric' 
});

一個原始和叉之間的差別最後一個音符是如何設置解析器

原來只允許設置的列解析器在headers選項內。

$(function() { 
    $('#brands').tablesorter({ 
     headers: { 
      2: {sorter:'grades'}, 
      3: {sorter:'grades'}, 
      4: {sorter:'grades'}, 
      5: {sorter:'grades'}, 
      6: {sorter:'grades'} 
     } 
    }); 
});

叉仍然工作與在headers選項設置分揀機，但分揀機也可以使用在標題類名
```
<th class="extractor-select sorter-grades">Rating</th> 
```
*注設置：在「提取選」除非每個單元格包含一個<select>元素並且加載了parser-input-select.js文件，否則該類名稱將不起作用。

來源

2015-12-17 22:07:51 Mottie

TableSorter自定義分析器沒有在Chrome上正確排序

回答

相關問題