Urutkan tabel jQuery

Saya memiliki tabel HTML yang sangat sederhana dengan 4 kolom:

Facility Name, Phone #, City, Specialty

Saya ingin pengguna dapat mengurutkan berdasarkan Nama Fasilitas dan Kota saja.

Bagaimana saya bisa mengkode ini menggunakan jQuery?

Jika Anda ingin menghindari semua lonceng dan peluit maka boleh saya sarankan plugin sederhana inisortElements . Pemakaian:

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;

        });

    });

Dan sebuah demo. (klik tajuk kolom "kota" dan "fasilitas" untuk menyortir)

Saya menemukan ini, dan berpikir saya akan membuang 2 sen saya. Klik pada tajuk kolom untuk mengurutkan naik, dan lagi untuk mengurutkan turun.

• Bekerja di Chrome, Firefox, Opera DAN IE (8)
• Hanya menggunakan JQuery
• Apakah pengurutan alfa dan numerik - naik dan turun

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

** Pembaruan: 2018

• Bagi mereka yang tertarik, saya telah memberikan solusi Javascript ES6 Polos di sini .

Sejauh ini, yang termudah yang saya gunakan adalah: http://datatables.net/

Sangat luar biasa sederhana ... hanya pastikan jika Anda pergi rute penggantian DOM (yaitu, membangun tabel dan membiarkan DataTables memformat ulang itu) maka pastikan untuk memformat meja Anda dengan <thead>dan <tbody>atau itu tidak akan berhasil. Itu tentang satu-satunya gotcha.

Ada juga dukungan untuk AJAX, dll. Seperti semua kode yang benar-benar bagus, juga SANGAT mudah untuk mematikannya. Anda akan terkejut apa yang mungkin Anda gunakan. Saya mulai dengan "telanjang" DataTable yang hanya mengurutkan satu bidang dan kemudian menyadari bahwa beberapa fitur benar-benar relevan dengan apa yang saya lakukan. Klien MENCINTAI fitur baru.

Poin bonus ke DataTables untuk dukungan ThemeRoller lengkap ....

Saya juga beruntung menggunakan tablesorter, tetapi tidak semudah itu, tidak cukup baik didokumentasikan, dan hanya memiliki fitur ok.

Kami baru saja mulai menggunakan alat apik ini: https://plugins.jquery.com/tablesorter/

Ada video tentang penggunaannya di: http://www.highoncoding.com/Articles/695_Sorting_GridView_Using_JQuery_TableSorter_Plug_in.aspx

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

Dengan meja sederhana

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

Jawaban saya akan "hati-hati". Banyak add-on pengurutan tabel jQuery hanya mengurutkan apa yang Anda berikan ke browser. Dalam banyak kasus, Anda harus ingat bahwa tabel adalah kumpulan data yang dinamis, dan berpotensi mengandung zillions baris data.

Anda menyebutkan bahwa Anda hanya memiliki 4 kolom, tetapi jauh lebih penting, Anda tidak menyebutkan berapa banyak baris yang kita bicarakan di sini.

Jika Anda melewatkan 5.000 baris ke browser dari database, mengetahui bahwa tabel database aktual berisi 100.000 baris, pertanyaan saya adalah: apa gunanya membuat tabel dapat diurutkan? Untuk melakukan pengurutan yang tepat, Anda harus mengirim kueri kembali ke database, dan membiarkan database (alat yang sebenarnya dirancang untuk mengurutkan data) melakukan pengurutan untuk Anda.

Sebagai jawaban langsung atas pertanyaan Anda, add-on sortir terbaik yang pernah saya temui adalah Ingrid. Ada banyak alasan mengapa saya tidak suka add-on ini ("lonceng dan peluit yang tidak perlu ..." seperti yang Anda sebut), tetapi salah satu fitur terbaik dalam hal jenis, adalah bahwa ia menggunakan ajax, dan tidak t berasumsi bahwa Anda sudah memberikan semua data sebelum melakukan sortir.

Saya menyadari bahwa jawaban ini mungkin berlebihan (dan lebih dari 2 tahun terlambat) untuk persyaratan Anda, tetapi saya merasa terganggu ketika pengembang di bidang saya mengabaikan hal ini. Jadi saya berharap orang lain mengambilnya.

Saya merasa lebih baik sekarang.

Ini adalah cara yang bagus untuk mengurutkan tabel:

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

Biola dapat ditemukan di sini:
https://jsfiddle.net/e3s84Luw/

Penjelasannya dapat ditemukan di sini: https://www.learningjquery.com/2017/03/how-to-sort-html-table-using-jquery-code

Saya suka jawaban yang diterima ini, namun, jarang Anda mendapatkan persyaratan untuk mengurutkan html dan tidak perlu menambahkan ikon yang menunjukkan arah pengurutan. Saya mengambil contoh penggunaan terima jawaban dan memperbaikinya dengan cepat hanya dengan menambahkan bootstrap ke proyek saya, dan menambahkan kode berikut:

<div></div>

di dalam masing-masing <th>sehingga Anda memiliki tempat untuk mengatur ikon.

setIcon(this, inverse);

dari Penggunaan jawaban yang diterima, di bawah baris:

th.click(function () {

dan dengan menambahkan metode 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();
    }

Ini demo . --Anda harus menjalankan demo di Firefox atau IE, atau menonaktifkan pemeriksaan tipe-MIME Chrome agar demo berfungsi. Itu tergantung pada Plugin sortElements, yang ditautkan oleh jawaban yang diterima, sebagai sumber daya eksternal. Hanya kepala!

Berikut adalah bagan yang dapat membantu memutuskan mana yang akan digunakan: http://blog.sematext.com/2011/09/19/top-javascript-dynamic-table-libraries/

@Nick Grealy jawabannya bagus, tetapi tidak memperhitungkan kemungkinan rowspanatribut dari sel header tabel (dan mungkin jawaban lain tidak melakukannya juga). Ini adalah perbaikan dari jawaban @Nick Grealy yang memperbaikinya. Berdasarkan jawaban ini juga (terima kasih @Andrew Orlov).

Saya juga mengganti $.isNumericfungsi dengan yang khusus (terima kasih @zad) agar berfungsi dengan versi jQuery yang lebih lama.

Untuk mengaktifkannya, tambahkan class="sortable"ke <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;
};

Anda dapat menggunakan plugin jQuery ( breedjs ) yang menyediakan sortir, filter, dan pagination:

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

Contoh kerja pada biola

Yang ini tidak menutup browser, mudah dikonfigurasi lebih lanjut:

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() 
}

Untuk respons James, saya hanya akan mengubah fungsi penyortiran agar lebih universal. Dengan cara ini akan mengurutkan teks alfabet dan angka seperti angka.

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

Pendekatan lain untuk mengurutkan tabel HTML. (berdasarkan 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>

Saya akhirnya menggunakan jawaban Nick (yang paling populer tetapi tidak diterima) https://stackoverflow.com/a/19947532/5271220

dan dikombinasikan dengan https://stackoverflow.com/a/16819442/5271220 tetapi tidak ingin menambahkan ikon atau fontawesome ke proyek. Gaya CSS untuk sort-kolom-asc / desc saya lakukan warna, padding, batas bulat.

Saya juga memodifikasinya untuk naik kelas bukan oleh yang lain sehingga kita bisa mengontrol mana yang bisa diurutkan. Ini juga bisa berguna nanti jika ada dua tabel meskipun modifikasi lebih lanjut perlu dilakukan untuk itu.

tubuh:

 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"; ...

... lebih jauh ke bawah tubuh

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

fungsi:

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 = "";
        });
    }

Suara saya! jquery.sortElements.js dan jquery sederhana
Sangat sederhana, sangat mudah, terima kasih 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
Satu cod lebih baik! Berfungsi untuk Semua tabel di semua Th di sepanjang waktu ... Lihat!
DEMO