jQuery 테이블 정렬

4 개의 열이있는 매우 간단한 HTML 테이블이 있습니다.

Facility Name, Phone #, City, Specialty

사용자가 시설 이름 과 도시 로만 정렬 할 수 있기를 바랍니다 .

jQuery를 사용하여 어떻게 코딩 할 수 있습니까?

모든 종소리와 휘파람을 피하려면 이 간단한 sortElements플러그인을 제안 하십시오 . 용법:

var table = $('table');

$('.sortable th')
    .wrapInner('<span title="sort this column"/>')
    .each(function(){

        var th = $(this),
            thIndex = th.index(),
            inverse = false;

        th.click(function(){

            table.find('td').filter(function(){

                return $(this).index() === thIndex;

            }).sortElements(function(a, b){

                if( $.text([a]) == $.text([b]) )
                    return 0;

                return $.text([a]) > $.text([b]) ?
                    inverse ? -1 : 1
                    : inverse ? 1 : -1;

            }, function(){

                // parentNode is the element we want to move
                return this.parentNode; 

            });

            inverse = !inverse;

        });

    });

그리고 데모. ( "도시"및 "시설"열 머리글을 클릭하여 정렬)

나는 이것을 만나서 2 센트를 던질 것이라고 생각했다. 열 머리글을 클릭하여 오름차순으로 정렬하고 다시 내림차순으로 정렬하십시오.

• Chrome, Firefox, Opera 및 IE에서 작동 (8)
• JQuery 만 사용
• 알파 및 숫자 정렬-오름차순 및 내림차순

$('th').click(function(){
    var table = $(this).parents('table').eq(0)
    var rows = table.find('tr:gt(0)').toArray().sort(comparer($(this).index()))
    this.asc = !this.asc
    if (!this.asc){rows = rows.reverse()}
    for (var i = 0; i < rows.length; i++){table.append(rows[i])}
})
function comparer(index) {
    return function(a, b) {
        var valA = getCellValue(a, index), valB = getCellValue(b, index)
        return $.isNumeric(valA) && $.isNumeric(valB) ? valA - valB : valA.toString().localeCompare(valB)
    }
}
function getCellValue(row, index){ return $(row).children('td').eq(index).text() }

table, th, td {
    border: 1px solid black;
}
th {
    cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr><th>Country</th><th>Date</th><th>Size</th></tr>
    <tr><td>France</td><td>2001-01-01</td><td>25</td></tr>
    <tr><td><a href=#>spain</a></td><td>2005-05-05</td><td></td></tr>
    <tr><td>Lebanon</td><td>2002-02-02</td><td>-17</td></tr>
    <tr><td>Argentina</td><td>2005-04-04</td><td>100</td></tr>
    <tr><td>USA</td><td></td><td>-6</td></tr>
</table>

** 업데이트 : 2018

• 관심있는 사람들을 위해 ES6 Plain Javascript 솔루션을 여기에 제공했습니다 .

지금까지 내가 사용한 가장 쉬운 방법은 다음과 같습니다. http://datatables.net/

당신은 (테이블을 구축하고 그것을 다시 포맷 DataTables셔서, IE)를 DOM 교체 경로를 이동하는 경우 놀랍게도 간단 ... 단지와 테이블의 서식을 확인 한 후 확인 <thead>하고 <tbody>또는 작동하지 않습니다. 그것은 유일한 문제에 관한 것입니다.

AJAX 등도 지원합니다. 모든 훌륭한 코드 조각과 마찬가지로 모든 코드를 끄는 것도 매우 쉽습니다. 하지만 당신은 당신이 무엇을 사용하는지 놀라게 될 것입니다. 하나의 필드 만 정렬 한 "베어 (bare)"DataTable로 시작한 다음 일부 기능이 실제로 수행중인 기능과 관련이 있음을 깨달았습니다. 고객은 새로운 기능을 좋아합니다.

전체 ThemeRoller 지원을위한 DataTables 보너스 포인트 ....

나는 또한 tableorter와 함께 운이 좋았지 만, 그렇게 쉽지는 않고 문서화가 잘되지 않았으며 ok 기능 만 가지고 있습니다.

우리는이 매끄러운 도구를 사용하기 시작했습니다 : https://plugins.jquery.com/tablesorter/

http://www.highoncoding.com/Articles/695_Sorting_GridView_Using_JQuery_TableSorter_Plug_in.aspx 에서 사용하는 비디오가 있습니다 .

    $('#tableRoster').tablesorter({
        headers: {
            0: { sorter: false },
            4: { sorter: false }
        }
    });

간단한 테이블로

<table id="tableRoster">
        <thead> 
                  <tr>
                    <th><input type="checkbox" class="rCheckBox" value="all" id="rAll" ></th>
                    <th>User</th>
                    <th>Verified</th>
                    <th>Recently Accessed</th>
                    <th>&nbsp;</th>
                  </tr>
        </thead>

내 대답은 "조심해야"합니다. 많은 jQuery 테이블 정렬 애드온은 브라우저에 전달하는 항목 만 정렬합니다. 대부분의 경우 테이블은 동적 데이터 세트이며 수백만 줄의 데이터 라인을 포함 할 수 있음을 명심해야합니다.

당신은 4 개의 열만 가지고 있다고 언급하지만, 더 중요한 것은 여기서 말하는 행의 수에 대해서는 언급하지 않습니다.

실제 데이터베이스 테이블에 100,000 개의 행이 있다는 것을 알고 데이터베이스에서 브라우저로 5000 줄을 전달하면 내 질문은 테이블을 정렬 할 수있는 요점이 무엇입니까? 적절한 정렬을 수행하려면 쿼리를 데이터베이스로 다시 보내고 데이터베이스 (실제로 데이터를 정렬하도록 설계된 도구)가 정렬을 수행하도록해야합니다.

귀하의 질문에 대한 직접적인 대답으로, 내가 접한 최고의 정렬 추가 기능은 Ingrid입니다. 이 부가 기능이 마음에 들지 않는 데는 여러 가지 이유가 있지만 ( "불필요한 종소리와 호루라기 ..."라고 부름) 가장 좋은 기능 중 하나는 아약스를 사용한다는 것입니다. t는 정렬하기 전에 모든 데이터를 이미 전달했다고 가정합니다.

이 답변이 귀하의 요구 사항에 비해 과도하고 (2 년 이상 늦었을 수도 있음) 알고 있지만, 해당 분야의 개발자 가이 시점을 간과하면 화가 나게됩니다. 그래서 나는 다른 누군가가 그것을 받기를 바랍니다.

기분이 나아졌습니다.

이것은 테이블을 정렬하는 좋은 방법입니다.

$(document).ready(function () {
                $('th').each(function (col) {
                    $(this).hover(
                            function () {
                                $(this).addClass('focus');
                            },
                            function () {
                                $(this).removeClass('focus');
                            }
                    );
                    $(this).click(function () {
                        if ($(this).is('.asc')) {
                            $(this).removeClass('asc');
                            $(this).addClass('desc selected');
                            sortOrder = -1;
                        } else {
                            $(this).addClass('asc selected');
                            $(this).removeClass('desc');
                            sortOrder = 1;
                        }
                        $(this).siblings().removeClass('asc selected');
                        $(this).siblings().removeClass('desc selected');
                        var arrData = $('table').find('tbody >tr:has(td)').get();
                        arrData.sort(function (a, b) {
                            var val1 = $(a).children('td').eq(col).text().toUpperCase();
                            var val2 = $(b).children('td').eq(col).text().toUpperCase();
                            if ($.isNumeric(val1) && $.isNumeric(val2))
                                return sortOrder == 1 ? val1 - val2 : val2 - val1;
                            else
                                return (val1 < val2) ? -sortOrder : (val1 > val2) ? sortOrder : 0;
                        });
                        $.each(arrData, function (index, row) {
                            $('tbody').append(row);
                        });
                    });
                });
            });

            table, th, td {
            border: 1px solid black;
        }
        th {
            cursor: pointer;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
        <tr><th>id</th><th>name</th><th>age</th></tr>
        <tr><td>1</td><td>Julian</td><td>31</td></tr>
        <tr><td>2</td><td>Bert</td><td>12</td></tr>
        <tr><td>3</td><td>Xavier</td><td>25</td></tr>
        <tr><td>4</td><td>Mindy</td><td>32</td></tr>
        <tr><td>5</td><td>David</td><td>40</td></tr>
    </table>

바이올린은 여기에서 찾을 수 있습니다 :
https://jsfiddle.net/e3s84Luw/

설명은 여기에서 찾을 수 있습니다 : https://www.learningjquery.com/2017/03/how-to-sort-html-table-using-jquery-code

나는이 받아 들인 대답을 좋아하지만 거의 HTML 정렬 요구 사항을 얻지 못하고 정렬 방향을 나타내는 아이콘을 추가 할 필요는 없습니다. 수락 응답의 사용 예를 가져 와서 프로젝트에 부트 스트랩을 추가하고 다음 코드를 추가하여 신속하게 수정했습니다.

<div></div>

각 내부 <th>사용자가 아이콘을 설정하는 곳이 너무.

setIcon(this, inverse);

허용 된 답변의 사용법에서 줄 아래에 :

th.click(function () {

그리고 setIcon 메소드를 추가하여 :

function setIcon(element, inverse) {

        var iconSpan = $(element).find('div');

        if (inverse == false) {
            $(iconSpan).removeClass();
            $(iconSpan).addClass('icon-white icon-arrow-up');
        } else {
            $(iconSpan).removeClass();
            $(iconSpan).addClass('icon-white icon-arrow-down');
        }
        $(element).siblings().find('div').removeClass();
    }

여기 데모가 있습니다. -Firefox 또는 IE에서 데모를 실행하거나 데모가 작동하도록 Chrome의 MIME 유형 검사를 비활성화해야합니다. 허용 된 답변으로 연결된 sortElements 플러그인에 외부 리소스로 의존합니다. 그냥 머리!

사용할 차트를 결정하는 데 도움이되는 차트는 다음과 같습니다. http://blog.sematext.com/2011/09/19/top-javascript-dynamic-table-libraries/

@Nick Grealy의 답변 은 훌륭하지만 rowspan테이블 헤더 셀의 가능한 속성 을 고려하지 않습니다 (아마도 다른 답변도하지 않습니다). @Nick Grealy의 답변이 개선되었습니다. 이 답변을 바탕으로 (@Andrew Orlov에게 감사드립니다).

또한 이전 jQuery 버전에서 작동 하도록 $.isNumeric함수를 사용자 정의 기능 (@zad 덕분에)으로 대체했습니다 .

이를 활성화하려면 태그에 추가 class="sortable"하십시오 <table>.

$(document).ready(function() {

    $('table.sortable th').click(function(){
        var table = $(this).parents('table').eq(0);
        var column_index = get_column_index(this);
        var rows = table.find('tbody tr').toArray().sort(comparer(column_index));
        this.asc = !this.asc;
        if (!this.asc){rows = rows.reverse()};
        for (var i = 0; i < rows.length; i++){table.append(rows[i])};
    })

});

function comparer(index) {
    return function(a, b) {
        var valA = getCellValue(a, index), valB = getCellValue(b, index);
        return isNumber(valA) && isNumber(valB) ? valA - valB : valA.localeCompare(valB);
    }
}
function getCellValue(row, index){ return $(row).children('td').eq(index).html() };

function isNumber(n) {
  return !isNaN(parseFloat(n)) && isFinite(n);
}

function get_column_index(element) {
    var clickedEl = $(element);
    var myCol = clickedEl.closest("th").index();
    var myRow = clickedEl.closest("tr").index();
    var rowspans = $("th[rowspan]");
    rowspans.each(function () {
        var rs = $(this);
        var rsIndex = rs.closest("tr").index();
        var rsQuantity = parseInt(rs.attr("rowspan"));
        if (myRow > rsIndex && myRow <= rsIndex + rsQuantity - 1) {
            myCol++;
        }
    });
    // alert('Row: ' + myRow + ', Column: ' + myCol);
    return myCol;
};

정렬, 필터 및 페이지 매김을 제공 하는 jQuery 플러그인 ( breedjs )을 사용할 수 있습니다 .

HTML :

<table>
  <thead>
    <tr>
      <th sort='name'>Name</th>
      <th>Phone</th>
      <th sort='city'>City</th>
      <th>Speciality</th>
    </tr>
  </thead>
  <tbody>
    <tr b-scope="people" b-loop="person in people">
      <td b-sort="name">{{person.name}}</td>
      <td>{{person.phone}}</td>
      <td b-sort="city">{{person.city}}</td>
      <td>{{person.speciality}}</td>
    </tr>
  </tbody>
</table>

JS :

$(function(){
  var data = {
    people: [
      {name: 'c', phone: 123, city: 'b', speciality: 'a'},
      {name: 'b', phone: 345, city: 'a', speciality: 'c'},
      {name: 'a', phone: 234, city: 'c', speciality: 'b'},
    ]
  };
  breed.run({
    scope: 'people',
    input: data
  });
  $("th[sort]").click(function(){
    breed.sort({
      scope: 'people',
      selector: $(this).attr('sort')
    });
  });
});

바이올린의 실례

이것은 브라우저를 끊지 않고 쉽게 구성 할 수 있습니다.

var table = $('table');

$('th.sortable').click(function(){
    var table = $(this).parents('table').eq(0);
    var ths = table.find('tr:gt(0)').toArray().sort(compare($(this).index()));
    this.asc = !this.asc;
    if (!this.asc)
       ths = ths.reverse();
    for (var i = 0; i < ths.length; i++)
       table.append(ths[i]);
});

function compare(idx) {
    return function(a, b) {
       var A = tableCell(a, idx), B = tableCell(b, idx)
       return $.isNumeric(A) && $.isNumeric(B) ? 
          A - B : A.toString().localeCompare(B)
    }
}

function tableCell(tr, index){ 
    return $(tr).children('td').eq(index).text() 
}

James의 답변에 따라 정렬 기능을 변경하여 더 보편적으로 만들 것입니다. 이런 식으로 텍스트를 알파벳순과 숫자처럼 정렬합니다.

if( $.text([a]) == $.text([b]) )
    return 0;
if(isNaN($.text([a])) && isNaN($.text([b]))){
    return $.text([a]) > $.text([b]) ? 
       inverse ? -1 : 1
       : inverse ? 1 : -1;
}
else{
    return parseInt($.text([a])) > parseInt($.text([b])) ? 
      inverse ? -1 : 1
      : inverse ? 1 : -1;
}

HTML 테이블을 정렬하는 또 다른 방법입니다. ( W3.JS HTML 정렬 기준 )

/* Facility Name */
$('#bioTable th:eq(0)').addClass("control-label pointer");
/* Phone # */
$('#bioTable th:eq(1)').addClass("not-allowed");
/* City */
$('#bioTable th:eq(2)').addClass("control-label pointer");
/* Specialty */
$('#bioTable th:eq(3)').addClass("not-allowed");


var collection = [{
  "FacilityName": "MinION",
  "Phone": "999-8888",
  "City": "France",
  "Specialty": "Genetic Prediction"
}, {
  "FacilityName": "GridION X5",
  "Phone": "999-8812",
  "City": "Singapore",
  "Specialty": "DNA Assembly"
}, {
  "FacilityName": "PromethION",
  "Phone": "929-8888",
  "City": "San Francisco",
  "Specialty": "DNA Testing"
}, {
  "FacilityName": "iSeq 100 System",
  "Phone": "999-8008",
  "City": "Christchurch",
  "Specialty": "gDNA-mRNA sequencing"
}]

$tbody = $("#bioTable").append('<tbody></tbody>');

for (var i = 0; i < collection.length; i++) {
  $tbody = $tbody.append('<tr class="item"><td>' + collection[i]["FacilityName"] + '</td><td>' + collection[i]["Phone"] + '</td><td>' + collection[i]["City"] + '</td><td>' + collection[i]["Specialty"] + '</td></tr>');
}

.control-label:after {
  content: "*";
  color: red;
}

.pointer {
  cursor: pointer;
}

.not-allowed {
  cursor: not-allowed;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.w3schools.com/lib/w3.js"></script>
<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet" />
<p>Click the <strong>table headers</strong> to sort the table accordingly:</p>

<table id="bioTable" class="w3-table-all">
  <thead>
    <tr>
      <th onclick="w3.sortHTML('#bioTable', '.item', 'td:nth-child(1)')">Facility Name</th>
      <th>Phone #</th>
      <th onclick="w3.sortHTML('#bioTable', '.item', 'td:nth-child(3)')">City</th>
      <th>Specialty</th>
    </tr>
  </thead>
</table>

나는 Nick의 대답 (가장 인기 있지만 받아 들여지지 않은)을 사용하여 끝났다 https://stackoverflow.com/a/19947532/5271220

https://stackoverflow.com/a/16819442/5271220 과 결합 했지만 프로젝트에 아이콘이나 글꼴을 추가하고 싶지 않았습니다. sort-column-asc / desc의 CSS 스타일은 색상, 패딩, 둥근 테두리를 사용했습니다.

또한 정렬 가능한 것을 제어 할 수 있도록 클래스가 아닌 클래스별로 이동하도록 수정했습니다. 더 많은 수정이 필요하지만 두 개의 테이블이 있으면 나중에 유용 할 수도 있습니다.

몸:

 html += "<thead>\n";
    html += "<th></th>\n";
    html += "<th class=\"sort-header\">Name <span></span></i></th>\n";
    html += "<th class=\"sort-header\">Status <span></span></th>\n";
    html += "<th class=\"sort-header\">Comments <span></span></th>\n";
    html += "<th class=\"sort-header\">Location <span></span></th>\n";
    html += "<th nowrap class=\"sort-header\">Est. return <span></span></th>\n";
    html += "</thead>\n";
    html += "<tbody>\n"; ...

... 몸을 더 아래로

$("body").on("click", ".sort-header", function (e) {
    var table = $(this).parents('table').eq(0)
    var rows = table.find('tr:gt(0)').toArray().sort(comparer($(this).index()))
    this.asc = !this.asc
    if (!this.asc) { rows = rows.reverse() }
    for (var i = 0; i < rows.length; i++) { table.append(rows[i]) }

    setIcon(e.target, this.asc);
});

기능 :

function comparer(index) {
        return function (a, b) {
            var valA = getCellValue(a, index), valB = getCellValue(b, index)
            return $.isNumeric(valA) && $.isNumeric(valB) ? valA - valB : valA.toString().localeCompare(valB)
        }
    }

    function getCellValue(row, index) {
        return $(row).children('td').eq(index).text()
    }

    function setIcon(element, inverse) {

        var iconSpan = $(element).find('span');

        if (inverse == true) {
            $(iconSpan).removeClass();
            $(iconSpan).addClass('sort-column-asc');
            $(iconSpan)[0].innerHTML = " &#8593 " // arrow up
        } else {
            $(iconSpan).removeClass();
            $(iconSpan).addClass('sort-column-desc');
            $(iconSpan)[0].innerHTML = " &#8595 " // arrow down 
        }

        $(element).siblings().find('span').each(function (i, obj) {
            $(obj).removeClass();
            obj.innerHTML = "";
        });
    }

내 투표! jquery.sortElements.js 와 간단한 jquery
매우 간단하고 매우 쉽습니다. 감사합니다.

            $('th').live('click', function(){

            var th = $(this), thIndex = th.index(), var table = $(this).parent().parent();

                switch($(this).attr('inverse')){
                case 'false': inverse = true; break;
                case 'true:': inverse = false; break;
                default: inverse = false; break;
                }
            th.attr('inverse',inverse)

            table.find('td').filter(function(){
                return $(this).index() === thIndex;
            }).sortElements(function(a, b){
                return $.text([a]) > $.text([b]) ?
                    inverse ? -1 : 1
                    : inverse ? 1 : -1;
            }, function(){
                // parentNode is the element we want to move
                return this.parentNode; 
            });
            inverse = !inverse;     
            });

Dei uma melhorada do código
One 대구 더 나은! 항상 모든 Th의 ​​모든 테이블에 대한 함수 ...보세요!
데모