sortowanie tabeli jQuery

Natknąłem się na to i pomyślałem, że dorzucę swoje 2 centy. Kliknij nagłówki kolumn, aby sortować rosnąco i ponownie, aby sortować malejąco.

Działa w przeglądarce Chrome, Firefox, Opera i IE (8)
• używa tylko JQuery
• czy sortowanie alfanumeryczne-rosnąco i malejąco

$('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>

** Aktualizacja: 2018

• dla tych, którzy są zainteresowani, podałem ES6 Plain Javascript rozwiązanie tutaj .

Zdecydowanie najprostszym z nich jest: http://datatables.net/

Istnieje również wsparcie dla AJAX, itp. Podobnie jak w przypadku wszystkich naprawdę dobrych kawałków kodu, bardzo łatwo jest je wyłączyć. Zdziwiłbyś się, czego możesz użyć. Zacząłem od" gołego " DataTable, który posortował tylko jedno pole, a następnie zdałem sobie sprawę, że niektóre funkcje były naprawdę istotne dla tego, co robię. Klienci uwielbiają nowe funkcje.

Punkty bonusowe do DataTables za pełną obsługę ThemeRoller....

Ja też miałem ok szczęścia z tabletami, ale to nie jest tak proste, nie tak dobrze udokumentowane, i ma tylko ok funkcje.

Właśnie zaczęliśmy używać tego sprytnego narzędzia: http://tablesorter.com/docs/

Jest film o jego wykorzystaniu w: http://www.highoncoding.com/Articles/695_Sorting_GridView_Using_JQuery_TableSorter_Plug_in.aspx

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

Z prostą tabelą

<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>

Moja odpowiedź brzmiałaby "bądź ostrożny". Wiele dodatków sortujących tabelę jQuery sortuje tylko to, co PRZEKAZUJESZ do przeglądarki. W wielu przypadkach należy pamiętać, że tabele są dynamicznymi zestawami danych i mogą potencjalnie zawierać miliardy linii danych.

Wspominasz, że masz tylko 4 kolumny, ale co ważniejsze, nie wspominasz, ile wierszy tu mówimy.

Jeśli przekazujesz 5000 linii do przeglądarki z bazy danych, wiedząc, że rzeczywista baza danych-tabela zawiera 100 000 wierszy, moje pytanie brzmi: jaki jest sens sortowania tabeli? Aby dokonać właściwego sortowania, musisz wysłać zapytanie z powrotem do bazy danych i pozwolić, aby baza danych (narzędzie faktycznie zaprojektowane do sortowania danych) wykonała sortowanie za Ciebie.

W bezpośredniej odpowiedzi na twoje pytanie, najlepszy dodatek sortujący, na jaki natknąłem się, to Ingrid. Jest wiele powodów, dla których nie lubię tego dodatku ("niepotrzebne dzwonki i gwizdki..."jak to nazywasz), ale jednym z nich jest najlepsze cechy pod względem sortowania, to to, że używa ajax, i nie zakłada, że już przekazałeś mu wszystkie dane, zanim zrobi to sortowanie.

Zdaję sobie sprawę, że ta odpowiedź jest prawdopodobnie przesadą (i ponad 2 lata spóźniona) jak na twoje wymagania, ale denerwuję się, gdy deweloperzy w mojej dziedzinie przeoczą ten punkt. Mam nadzieję, że ktoś inny się tym zajmie.

Czuję się już lepiej.

Oto wykres, który może być pomocny przy wyborze: http://blog.sematext.com/2011/09/19/top-javascript-dynamic-table-libraries/

Uwielbiam tę akceptowaną odpowiedź, jednak rzadko dostajesz wymagania dotyczące sortowania html i nie musisz dodawać ikon wskazujących kierunek sortowania. Wziąłem przykład użycia accept answer i szybko to naprawiłem, dodając po prostu bootstrap do mojego projektu i dodając następujący kod:

<div></div>

Wewnątrz każdego <th> tak, że masz miejsce, aby ustawić ikonę.

setIcon(this, inverse);

Z zaakceptowanej Odpowiedzi, poniżej linii:

th.click(function () {

I dodając metoda 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();
    }

Oto demo . --Musisz uruchomić demo w Firefoksie lub IE lub wyłączyć sprawdzanie typu MIME Chrome, aby demo działało. To zależy od wtyczki sortElements, powiązanej z zaakceptowaną odpowiedzią, jako zewnętrznego zasobu. Tylko Ostrzeżenie!

Możesz użyć wtyczki jQuery (breedjs ), która zapewnia sortowanie, filtrowanie i paginację:

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')
    });
  });
});

Przykład pracy na fiddle

Na odpowiedź Jakuba zmienię tylko funkcję sortowania, aby była bardziej uniwersalna. W ten sposób będzie sortować tekst Alfabetycznie i cyfry jak liczby.

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;
}

@ Nick Grealy ' s answer jest świetna, ale nie bierze pod uwagę możliwych rowspan atrybutów komórek nagłówka tabeli(i prawdopodobnie inne odpowiedzi też tego nie robią). Oto ulepszenie odpowiedzi @Nick Grealy, która to naprawia. Na podstawie ta ODPOWIEDŹ też (dzięki @ Andrew Orlov).

Zamieniłem również funkcję $.isNumeric na niestandardową (dzięki @zad), aby działała ze starszymi wersjami jQuery.

Aby go aktywować, dodaj class="sortable" do <table> tag.

$(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;
};

Inne podejście do sortowania tabeli HTML. (na podstawie W3.JS HTML Sort)

/* 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>

To jest ładny sposób sortowania tabeli:

$(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>

Skrzypce można znaleźć tutaj:
https://jsfiddle.net/e3s84Luw/

Wyjaśnienie można znaleźć tutaj: https://www.learningjquery.com/2017/03/how-to-sort-html-table-using-jquery-code

Mój głos! jquery.sortElements.JS i simple jquery
Bardzo proste, bardzo łatwe, dzięki nandhp...

            $('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
Jeden dorsz lepszy! Funkcja dla wszystkich tabel w all Th in all time... Spójrz!
DEMO