행 대신 열 테이블 정렬

Question

내 헤더가 첫 번째 열에있는 테이블이 있습니다. 이 칼럼으로 테이블을 정렬하는 메소드를 검색합니다. 나는 datatable과 tablesorter를 알고 있지만, 이와 같은 식으로 테이블을 정렬하기위한 해결책을 찾지 못했습니다.

Name | John | Jane | Toto 
Value| 1256 | 125 | 8563 
Val2 | 12 | 45 | 3 

(여기 JSFiddle에 코드의 시작 : https://jsfiddle.net/nLwo8bya/1/)

명확하게하려면, 여기 내 테이블의 예입니다

그리고 첫 번째 열에서 셀을 클릭합니다 이 행을 기준으로 다른 열을 정렬합니다. 내가 이름을 클릭하면

는 위의 표는 다음과 같습니다

Name | Jane | John | Toto 
Value| 125 | 1256 | 8563 
Val2 | 45 | 12 | 3 

테이블의 열 정렬 이름으로 지금 (이 경우 첫 번째 행)입니다. 당신의 도움에 미리

감사

편집 :처럼 nnnnnn은 내가 처음

Answer 1

하여 열을 정렬 할 종료하도록 테이블을 재구성하는 것이 었습니다 마음에 온 첫 번째 방법을 원하는 말한다 하나를 사용하여 행과 열이 하나씩; 이들 각 열 tds에는 해당 열의 데이터가있는 중첩 테이블이 포함됩니다. 그렇게하면 최상위 수준의 정렬을해야하기 때문에 실제 정렬 프로세스가 매우 간단합니다.

복잡한 부분은 구조 조정입니다. 다음은 필자가 작성한 첫 번째 추악한 코드 다. 이것은 아마도 최대 정돈하고 꽤 많이 최적화, 또는 완전히 똑똑한 방법으로 재 작성,하지만 난 떠날 수 독자들에게 운동 ... 내가 추가

주

$(document).ready(function(){ 
 
    var trs = $("table tr"); 
 
    var tds = trs.find("td"); 
 
    var columnCount = trs.first().children().length; 
 
    var columns = []; 
 
    var sortableTR = $("<tr></tr>"); 
 
    for (var i = 0; i < columnCount; i++) 
 
    columns.push([]); 
 

 
    tds.each(function(i,td) { 
 
    columns[i%columnCount].push($("<tr></tr>").append(td)); 
 
    }); 
 
    columns.forEach(function(v) { 
 
    sortableTR.append($("<td></td>").append($("<table></table>").append(v))); 
 
    }); 
 
    trs.remove("tr"); 
 
    $("table").append(sortableTR); 
 
    sortableTR.children().first().on("click", "tr", function(e) { 
 
    var row = $(this); 
 
    var rowIndex = row.index(); 
 
    var dataType = row.find("td").attr("data-type"); 
 
    var cols = sortableTR.children().slice(1); 
 
    cols.sort(function(a, b) { 
 
     a = $(a).find("td").eq(rowIndex).text(); 
 
     b = $(b).find("td").eq(rowIndex).text(); 
 
     if (dataType==="number") { 
 
     a = +a; 
 
     b = +b; 
 
     } 
 
     return a > b ? 1 : a < b ? -1 : 0; 
 
    }); 
 
    cols.each(function() { sortableTR.append(this); }); 
 
    }); 
 
});

table, tr, td { border: none; border-collapse: collapse; } 
 
td { width: 100px; padding: 0px; margin: 0px; } 
 
td td { border: thin grey solid; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<table border="1"> 
 
<tr><td data-type="string"><b>Name</b></td><td>John</td><td>Jane</td><td>Jack</td></tr> 
 
<tr><td data-type="number"><b>Age</b></td><td>36</td><td>34</td><td>42</td></tr> 
 
<tr><td data-type="number"><b>Weight</b></td><td>111</td><td>56</td><td>82</td></tr> 
 
<tr><td data-type="number"><b>Score</b></td><td>25</td><td>42</td><td>18</td></tr> 
 
</table>

로 표제 셀에 data-type 속성을 지정하여 정렬이 데이터를 숫자로 처리할지 여부를 알 수 있도록합니다. 결과 테이블에 스타일을 고정

은 ...

Answer 2

열 정렬

// create headings array to sort 
var headings = $('#sortedTable tr:first td:gt(0)').map(function(item){  
     return $(this).text() 
    }).get(); 
    // copy and sort new array 
    var sortedHeadings = headings.slice().sort(); 
    // create object where old index is key, value is new index 
    var indices = headings.reduce(function(a,c,i){ 
    a[i]= sortedHeadings.indexOf(c); 
    return a; 
    },{}); 
    // iterate rows and sort cells 
    $('#sortedTable tr') .each(function(i){ 
    // sort using index hash object above 
    var $cells = $(this).children(':gt(0)').sort(function(a,b){ 
     return indices[$(a).index()]-indices[$(b).index()] 
    }); 
    // append sorted cells 
    $(this).append($cells) 
    }); 

DEMO

의