테이블 orter 2.0.3 Colspan 문제

Question

Tablesterter 2.0.3을 사용하는 몇 가지 문제가 있습니다.

첫 번째 문제는 테이블에 colspan을 설정할 때입니다. 기본적으로 아래 에서이 작업을 수행하면 각 열을 정렬하지 않습니다.

<table> 
<thead> 
        <th colspan="3"></th>  
        <th>Four</th> 
        <th>Five</th>
        <th>Six</th>
        <th>Seven</th>  
</thead> 
<tbody> 
<tr> 
        <td>1</td> 
        <td>2</td> 
        <td>3</td> 
        <td>4</td>
        <td>5</td> 
        <td>6</td>
        <td>7</td>
</tr>  
</tbody> 
</table> 

내가 가진 두 번째 문제는 내가 테이블 러 (Tableserter.js)에서 SortInitialorder ( "desc"또는 "asc")를 설정하더라도 클릭 할 때 정렬 오름차순 또는 내림차순을 만드는 데 아무런 영향을 미치지 않는다는 것입니다.

누구든지 도와 줄 수 있습니까?

Answer 1

문제를 해결하려면 데이터 콜에 헤더를 자신만의 맵핑을 만들 수 있습니다. 내가 원하는 방식으로 기능을 얻기 위해 내가 한 일은 다음과 같습니다.

테이블 orter.js에 다음 방법을 추가했습니다.

function findInMap(map, index, reverse) {
    for(var i = 0; i < map.length; ++i) {
        if(map[i][reverse ? 1 : 0] == index) return map[i][reverse ? 0 : 1];
    }

    return index;
}

또한 다음을 추가했습니다 this.defaults

customMap: []

다음 방법을 변경하십시오.

function setHeadersCss(table,$headers, list, css) {
    $headers.removeClass(css[0]).removeClass(css[1]);

    var h = [];
    $headers.each(function(offset) {
        if(!this.sortDisabled) {
            h[this.column] = $(this);                   
        }
    });

    var l = list.length; 

    for(var i=0; i < l; i++) {
        var header = list[i];
        var headerIndex = findInMap(table.config.customMap, header[0], true);
        h[headerIndex].addClass(css[header[1]]);
    }
}

마지막으로, 다음을 추가/변경하십시오. $headers.click(function(e) {

추가하다:

var ia = findInMap(config.customMap, i, false);

변화:config.sortList.push([i,this.order]); 에게 config.sortList.push([ia,this.order]);

테이블 러가 통과 할 때 a customMap[[header_col_id, data_col_id]] 귀하의 경우에는 다음과 같습니다.

customMap[
    [2, 4],
    [3, 5],
    ...
]

Answer 2

3 개의 열에 걸쳐 헤더를 클릭하면 어떻게 될까요? 어떤 열을 정렬 할 것으로 예상됩니까? 일반적으로 테이블 러가 작동하려면 각 열에 하나의 헤더가 있어야합니다.

sortInitialOrder 테이블 러의 웹 페이지에서 언급되지 않은 것 같지만 코드에는 존재합니다. 나는 이전에 이것을 사용했습니다.

sortList: [[5, 0]]

5 번째 열을 사용하여 오름차순을 정렬합니다.

Answer 3

나는 또한 테이블이 오름차순을 정렬하기를 원했기 때문에 문제를 해결했습니다. 536 행을 수정했습니다. this.order = this.count++ % 0; 내가 원하는대로 분류합니다.

Colspan과 관련하여, 나는 방금 각 열을 정렬하기 위해 공백을 가지고있는 것에 의지해야했습니다. 올바른 마크 업은 아닐 수도 있지만 이것을 고치는 다른 방법을 볼 수 없습니다.

Answer 4

나는 테이블 코드 자체의 다음 패치로 비슷한 문제를 해결했다.

Index: jquery.tablesorter.js
===================================================================
--- jquery.tablesorter.js   (.../original)  (revision x)
+++ jquery.tablesorter.js   (.../mine)  (revision y)
@@ -278,7 +278,10 @@
                     cache.row.push(c);

                     for (var j = 0; j < totalCells; ++j) {
-                        cols.push(parsers[j].format(getElementText(table.config, c[0].cells[j]), table, c[0].cells[j]));
+                        var cSpan = c[0].cells[j].colSpan || 1;
+                        while (cSpan--) {
+                            cols.push(parsers[j].format(getElementText(table.config, c[0].cells[j]), table, c[0].cells[j]));
+                        }
                 }

내 문제가 바뀌 었음에도 불구하고; 1 개의 Colnspanned 셀에 걸쳐 2 개의 열이있었습니다. 스파닝 된 열이 여전히 정렬 된 후에 모든 열을 수정합니다.