jQuery tablo sıralaması

4 sütun ile çok basit bir HTML tablo var:

Facility Name, Phone #, City, Specialty

Kullanıcının yalnızca Tesis Adı ve Şehre göre sıralayabilmesini istiyorum .

Bunu jQuery kullanarak nasıl kodlayabilirim?

Eğer tüm çan ve ıslık önlemek istiyorsanız o zaman bu basit bir sortElementseklenti önerebilir . Kullanımı:

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;

        });

    });

Ve bir demo. (sıralamak için "şehir" ve "tesis" sütun başlıklarını tıklayın)

Buna rastladım ve 2 sentimi atacağımı düşündüm. Artan sıralamak için sütun başlıklarına, azalan sıralamak içinse yeniden tıklayın.

• Chrome, Firefox, Opera ve IE'de çalışır (8)
• Sadece JQuery kullanır
• Alfa ve sayısal sıralama yapar - artan ve azalan

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

** Güncelleme: 2018

• İlgilenenler için burada bir ES6 Plain Javascript çözümü sağladım .

Şimdiye kadar kullandığım en kolayı: http://datatables.net/

İnanılmaz derecede basit ... DOM değiştirme yoluna gittiğinizden (IE, bir tablo oluşturup DataTables'ın yeniden biçimlendirmesine izin verdiğinizden) emin olun ve sonra tablonuzu biçimlendirdiğinizden emin olun <thead>ve <tbody>ya da çalışmaz. Bu sadece yakaladım.

AJAX, vb. İçin de destek var. Tüm gerçekten iyi kod parçalarında olduğu gibi, hepsini kapatmak çok kolay. Yine de, ne kullanabileceğinize şaşıracaksınız. Sadece bir alanı sıralayan "çıplak" bir DataTable ile başladım ve sonra bazı özelliklerin gerçekten yaptığım şeyle alakalı olduğunu fark ettim. Müşteriler yeni özellikleri SEVİYORUM.

Bonus, tam ThemeRoller desteği için DataTable'lara işaret ediyor ....

Ben de tablesorter ile ok şans yaşadım, ama neredeyse kadar kolay değil, oldukça iyi belgelenmiş ve sadece ok özellikleri vardır.

Bu kaygan aracı kullanmaya yeni başladık: https://plugins.jquery.com/tablesorter/

Kullanımıyla ilgili bir video var: http://www.highoncoding.com/Articles/695_Sorting_GridView_Using_JQuery_TableSorter_Plug_in.aspx

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

Basit bir masa ile

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

Cevabım "dikkatli olun" olacaktır. Birçok jQuery tablo sıralama eklentisi yalnızca tarayıcıya ilettiğiniz öğeyi sıralar. Çoğu durumda, tabloların dinamik veri kümeleri olduğunu ve potansiyel olarak milyonlarca veri satırı içerebileceğini unutmayın.

Sadece 4 sütununuz olduğunu belirtiyorsunuz, ancak daha da önemlisi, burada kaç satırdan bahsettiğimizden bahsetmiyorsunuz.

Veritabanından tarayıcıya 5000 satır iletirseniz, gerçek veritabanı tablosunun 100.000 satır içerdiğini bilerek sorum şu: tabloyu sıralanabilir hale getirmenin anlamı nedir? Doğru bir sıralama yapmak için, sorguyu veritabanına geri göndermeniz ve veritabanının (verileri sıralamak için tasarlanmış bir araç) sıralamayı sizin için yapmasına izin vermeniz gerekir.

Sorunuza doğrudan yanıt olarak, karşılaştığım en iyi sıralama eklentisi Ingrid. Bu eklentiyi sevmememin birçok nedeni var ("gereksiz çan ve ıslık ..." dediğiniz gibi), ancak sıralama açısından en iyi özelliklerinden biri, ajax kullanması ve kullanmaması ' t Tüm verileri sıralamadan önce geçtiğinizi varsayalım.

Bu cevabın gereksinimleriniz için muhtemelen aşırı derecede (ve 2 yıldan fazla geç) olduğunu biliyorum, ancak alanımdaki geliştiriciler bu noktayı gözden kaçırdığında rahatsız oluyorum. Umarım başkası alır.

Şimdi daha iyi hissediyorum.

Bu bir tabloyu sıralamanın güzel bir yoludur:

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

Keman burada bulunabilir:
https://jsfiddle.net/e3s84Luw/

Açıklama burada bulunabilir: https://www.learningjquery.com/2017/03/how-to-sort-html-table-using-jquery-code

Bu kabul edilen cevabı seviyorum, ancak, nadiren html'yi sıralamak için gereksinimler alıyorsunuz ve sıralama yönünü gösteren simgeler eklemek zorunda değilsiniz. Kabul yanıtlayıcısının kullanım örneğini aldım ve projeme bootstrap ekleyip aşağıdaki kodu ekleyerek bunu hızlı bir şekilde düzelttim:

<div></div>

<th>simgeyi ayarlamak için bir yer olması için her birinin içinde .

setIcon(this, inverse);

kabul edilen yanıtın Kullanımından, satırın altında:

th.click(function () {

ve setIcon yöntemini ekleyerek:

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

İşte bir demo . Demoyu Firefox veya IE'de çalıştırmanız veya demo'nun çalışması için Chrome'un MIME türü kontrolünü devre dışı bırakmanız gerekir. Dış kaynak olarak, kabul edilen yanıtla bağlanan sortElements Eklentisine bağlıdır. Sadece aklınızda bulunsun!

Hangisinin kullanılacağına karar vermede yardımcı olabilecek bir grafik: http://blog.sematext.com/2011/09/19/top-javascript-dynamic-table-libraries/

@Nick Grealy'nin cevabı harika, ancak rowspantablo başlık hücrelerinin olası özelliklerini dikkate almıyor (ve muhtemelen diğer cevaplar da yapmıyor). İşte @Nick Grealy'nin cevabını düzelten cevabı. Bu cevaba dayanarak da (teşekkürler @Andrew Orlov).

Ayrıca eski jQuery sürümleriyle çalışmasını sağlamak için $.isNumericişlevi özel bir işlevle (teşekkürler @zad) değiştirdim.

Etkinleştirmek class="sortable"için <table>etikete ekleyin .

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

Bir jQuery eklentisi kullanabilirsiniz ( breedjsSıralama, filtre ve sayfalandırma sağlayan ) :

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

Keman üzerinde çalışma örneği

Bu tarayıcıyı / tarayıcıları kapatmaz, daha kolay yapılandırılabilir:

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'in cevabına göre, sıralama işlevini sadece daha evrensel hale getirmek için değiştireceğim. Bu şekilde metni alfabetik ve sayılar gibi sayılar sıralar.

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 tablosunu sıralamak için başka bir yaklaşım. ( W3.JS HTML Sıralamasına göre )

/* 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'in cevabını kullandım (en popüler ama kabul edilmedi) https://stackoverflow.com/a/19947532/5271220

ve https://stackoverflow.com/a/16819442/5271220 ile birleştirdi ancak projeye simgeler veya fontawesome eklemek istemediler. Sıralama-sütun-asc / desc için CSS stilleri renk, dolgu, yuvarlak kenarlık yaptım.

Ayrıca, hangilerinin sıralanabilir olduğunu kontrol edebilmemiz için herhangi bir sınıftan ziyade sınıfa gitmek için değiştirdim. Bunun için daha fazla değişiklik yapılması gerekmesine rağmen iki tablo varsa bu daha sonra kullanışlı olabilir.

vücut:

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

... vücudun aşağısında

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

fonksiyonlar:

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

Oyum! jquery.sortElements.js ve basit jquery
Çok basit, çok kolay, teşekkürler 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
Bir morina daha iyi! Her zaman tüm Th Tüm tablolar için fonksiyon ... Bak!
DEMO