jQuery 테이블 분류기 부유 거리 정렬

Question

나는 tablesorter를 사용하여 테이블 내용을 정렬하고 있습니다. 내 테이블은 다음과 같습니다.

<table class="results" border="1"> 
<thead> 
    <tr> 
     <th class="header">No</th> 
     <th class="header">Distance</th> 
     <th class="header">Diagnostic Fee</th> 
     <th class="header">Regular Price </th> 
     <th class="header">Company Price</th> 
     <th class="">&nbsp;</th> 
    </tr> 
</thead> 

<tbody> 
    <tr> 
     <td>1</td> 
     <td class="distance"><a>16.50 kms.</a></td> 
     <td class="brand"><a>Credited</a></td> 
     <td><a>$5</a></td> 
     <td><a>$5<small>after 5% cash back</small></a></td> 
    </tr> 
    <tr> 
      <td>2</td> 
     <td class="distance"><a>6.30 kms.</a></td> 
     <td class="brand"><a>Credited</a></td> 
     <td><a>$8</a></td> 
     <td><a>$8<small>after 5% cash back</small></a></td> 
    </tr> 
    <tr> 
     <td>3</td> 
     <td class="distance"><a>10.25 kms.</a></td> 
     <td class="brand"><a>Credited</a></td> 
     <td><a>$2</a></td> 
     <td><a>$2<small>after 5% cash back</small></a></td> 
    </tr> 
</tbody> 
</table>​ 

거리와 가격을 사용하여 테이블을 정렬하고 싶습니다. 거리가 "12 kms"와 같은 영숫자로 표시되기 때문에 거리가있는 테이블을 해결하는 데 어려움을 겪고 있습니다. 그래서 테이블이 정렬되지 않습니다.

숫자 만 사용하여 콘텐츠를 구문 분석하는 방법에 대해 조언 해 줄 수있는 사람이 있습니까? 당신이 정렬하기 전에 텍스트를 이동하는 기능을 정의 할 수 있도록 여기

는 jsfiddle demo

Answer 1

Tablesorte가 옵션 'textExtraction'를 가지고있다. 예 :

$("table").tablesorter({ 
     debug:false, 
     sortList: [[0, 0], [2, 0]], 
     textExtraction: function(node) { 
      var $node = $(node) 
      var text = $node.text(); 
      if ($node.hasClass('distance')) { 
       text = text.replace('kms', ''); 
      }; 

      return text; 
     } 
}); 

Updated fiddle

Answer 2

tablesorter에 그것을 정확하게 데이터를 획득 할 수있는 세포를 추가 파서를 정의하는 방법을 제공한다. 거리

$.tablesorter.addParser({ 
    id: 'distance', 
    is: function(s) { 
    return false; 
    }, 
    format: function(text, table, cell) { 
    return parseFloat(text.replace('kms.', '')); 
    }, 
    type: 'numeric' 
}); 

, 그리고 :. 당신은

그래서 당신이있을 수 있습니다 관심있는 2 열 2 파서를 정의 할 필요가 가격

$.tablesorter.addParser({ 
    id: 'price', 
    is: function(s) { 
    return false; 
    }, 
    format: function(text, table, cell) { 
    return parseFloat(text.replace('$', '')); 
    }, 
    type: 'numeric' 
}); 

. 그런 다음 tablesorter에 구문 분석을 사용할 열을 지정하십시오.

$("table").tablesorter({ 
    debug:false, 
    sortList: [[0, 0], [2, 0]], 
    headers: { 
    1: { 
     sorter: 'distance' 
    }, 
    3: { 
     sorter: 'price' 
    } 
    } 
});​