jQuery 테이블 분류기가 숫자를 올바르게 정렬하지 않습니다.

StackOverflow https://stackoverflow.com/questions/1459710

  •  12-09-2019
  •  | 
  •  

문제

나는 jQuery tablesorter가 내 테이블 열의 숫자를 올바르게 정렬하도록 며칠 동안 노력해 왔습니다.

두 스크립트의 최신 버전을 사용하고 있습니다.

테이블은 잘 렌더링되지만 숫자 정렬이 올바르게 작동하지 않습니다.

숫자 열을 정렬하면 다음과 같은 결과가 나타납니다.

8 7 4 32 31 3 등 ..

당신이 기대할 곳 :32 31 8 등 ...

추가 자바스크립트 코드 추가에 대한 몇 가지 의견을 읽었지만 좋은 자바스크립트 예제를 찾을 수 없습니다.

현재 사용하고 있는 jQuery는 다음과 같습니다.

$(document).ready(function()
    {
      $("#table1")
       .tablesorter(
          {
            sortList: [[0,0]],
            widthFixed: true,
            widgets: ['zebra']
          } )
    }
);

내 HTML은 다음과 같습니다.

<table id="table1" class=tablesorter>
    <thead>
        <tr>
            <th width=65>Name</th>
            <th width=40>Count</th>
        </tr>
     </thead>
     <tbody>
         <tr><td>Name_1</td><td>32</td></tr>
         <tr><td>Name_2</td><td>12</td></tr>
         <tr><td>Name_3</td><td>11</td></tr>
         <tr><td>name_4</td><td>14</td></tr>
         <tr><td>Name_5</td><td>7</td></tr>
         <tr><td>Name_6</td><td>3</td></tr>
         <tr><td>Name_7</td><td>32</td></tr>
         <tr><td>Name_8</td><td>31</td></tr>
         <tr><td>Name_9</td><td>35</td></tr>
      </tbody>
</table>
도움이 되었습니까?

해결책 2 

<th width=110 class=\"{sorter: 'digit'}\">Count</th>

이로써 문제가 해결되었습니다.값을 숫자로 처리하도록 자바스크립트에 지시하면 정렬 작업이 올바르게 수행되었습니다.숫자 값이 스크립트에서 숫자로 확인되지 않는다는 것은 여전히 ​​어리석은 일입니다.하지만 결국엔 더 높은 목적이 있는 것 같아요.

시간을 내어 도와주셔서 감사합니다.

/폰스

다른 팁

바라건대 이것은 누군가 가이 게시물을 찾으면 누군가가 단순히 사용할 수 있습니다.

$(".table").tablesorter({
     headers: {
         5: { sorter: 'digit' } // column number, type
     }
 });

이것은 다른 사람들에게 분명했을 수도 있지만 (나에게는 아님) 솔루션을 {분류기 : 'Digit'} 메타 데이터로 작동 시키려면 다음을 사용해야합니다. jQuery 메타 데이터 플러그인.

나는 이것이 오래된 질문이라는 것을 알고 있지만, 나는 매우 같은 문제를 발견했으며 여기에 게시 된 솔루션을 시도하는 대신 먼저 플러그인 버전을 확인해야합니다. 최신 버전 (2.0.5)을 사용하지 않았다는 것을 알았을 때 모든 문제가 해결되었습니다.

숫자를 채워야하는 것 같습니다. 그것은 8, 7 및 4가 32, 31 이전에 주문되는 이유를 설명합니다.

이 시도:

function padLeft(s,len,c){
  c=c || '0';
  while(s.length< len) s= c+s;
  return s;
}

$("table").tablesorter({
  textExtraction: function(node) {         
    return padLeft(node.innerHTML,2);
  } 
});

더 큰 숫자를 정렬 해야하는 경우 2보다 높은 값을 사용하십시오.

이것도 시도 할 수도 있습니다.

$(document).ready(function() { 
    $("table").tablesorter({ 
        // put other options here ...
        textExtraction: function(node) {  
            return parseInt($(node).text()); 
        } 
    }); 
});

... 이것은 텍스트 만 추출한 후 분류 된 셀의 내용을 정수로 취급합니다.

HTML도 보여줄 수 있습니까? 테이블 러는 특별한 옵션없이 숫자 정렬을 감지하고 처리해야합니다. 숫자 값이 HTML로 둘러싸여있을 수 있습니까? 이 경우 a가 필요할 수 있습니다 추출 할 맞춤형 방법 HTML의 값.

참조 된 링크의 예 :

$(document).ready(function() { 

    // call the tablesorter plugin 
    $("table").tablesorter({ 
        // define a custom text extraction function 
        textExtraction: function(node) { 
            // extract data from markup and return it  
            return node.childNodes[0].childNodes[0].innerHTML; 
        } 
    }); 
});

jquery.tablesternor.js 코드에서 찾으십시오.

this.isDigit = function(s,config) {

    var DECIMAL = '\\' + config.decimal;
    var exp = '/(^[+]?0(' + DECIMAL +'0+)?$)|(^([-+]?[1-9][0-9]*)$)|(^([-+]?((0?|[1-9][0-9]*)' + DECIMAL +'(0*[1-9][0-9]*)))$)|(^[-+]?[1-9]+[0-9]*' + DECIMAL +'0+$)/';

    return RegExp(exp).test($.trim(s));
};

그리고 그것을 대체합니다.

this.isDigit = function(s,config) {

    var DECIMAL = '\\' + config.decimal;
    var exp = '/(^[+]?0(' + DECIMAL +'0+)?$)|(^([-+]?[1-9][0-9]*)$)|(^([-+]?((0?|[1-9][0-9]*)' + DECIMAL +'(0*[1-9][0-9]*)))$)|(^[-+]?[1-9]+[0-9]*' + DECIMAL +'0+$)/';

    //return RegExp(exp).test($.trim(s));
    return !isNaN(parseFloat($.trim(s))) && isFinite($.trim(s));
};
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top