сортировка таблицы jQuery - PullRequest
Новая
       53

сортировка таблицы jQuery

168 голосов
/ 01 июля 2010

У меня есть очень простая таблица HTML с 4 столбцами: 

Facility Name, Phone #, City, Specialty

Я хочу, чтобы пользователь мог сортировать по названию объекта и только по городу.

Как я могу кодировать это с помощью jQuery?

Ответы [ 15 ]

162 голосов
/ 13 ноября 2013

Я сталкивался с этим и думал, что добавлю свои 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

142 голосов
/ 01 июля 2010

Если вы хотите избежать всех наворотов, тогда я могу предложить этот простой 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;

        });

    });

И демонстрационная версия. (нажмите для сортировки заголовков столбцов "city" и "Facility")

38 голосов
/ 01 июля 2010

Самым простым из всех, что я использовал, является: http://datatables.net/

Удивительно просто ... просто убедитесь, что вы идете по пути замены DOM (IE, создаете таблицу и позволяете DataTables переформатировать ее) затем обязательно отформатируйте таблицу с <thead> и <tbody>, иначе она не будет работать.Это единственное замечание.

Также есть поддержка AJAX и т. Д. Как и во всех действительно хороших частях кода, также ОЧЕНЬ легко отключить все это.Вы были бы удивлены тем, что вы могли бы использовать, хотя.Я начал с «чистого» DataTable, который сортировал только одно поле, а затем понял, что некоторые функции действительно имеют отношение к тому, что я делаю.Клиенты любят новые функции.

Бонусные баллы на DataTables за полную поддержку ThemeRoller ....

Мне также повезло с таблицей сортировки, но это не так просто, не такхорошо документировано и имеет только хорошие черты.

18 голосов
/ 02 марта 2012

Мы только начали использовать этот скользкий инструмент: 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>
12 голосов
/ 25 октября 2012

Мой ответ будет "будь осторожен".Многие дополнения для сортировки таблиц jQuery сортируют только то, что вы передаете в браузер.Во многих случаях вам следует помнить, что таблицы являются динамическими наборами данных и могут содержать миллионы строк данных.

Вы упоминаете, что у вас есть только 4 столбца, но, что гораздо важнее, выне упоминайте, сколько строк мы здесь говорим.

Если вы передаете 5000 строк в базу данных из браузера, зная, что фактическая таблица базы данных содержит 100 000 строк, мой вопрос: в чем смысл?сделать стол сортируемым?Чтобы сделать правильную сортировку, вам нужно отправить запрос обратно в базу данных, и пусть база данных (инструмент, фактически предназначенный для сортировки данных) сделает за вас сортировку.

В прямом ответе наВаш вопрос, тем не менее, лучшее сортировочное дополнение, с которым я столкнулся, - Ингрид.Есть много причин, по которым мне не нравится это дополнение («ненужные навороты ...», как вы его называете), но одна из его лучших функций с точки зрения сортировки - это то, что он использует ajax и неЯ полагаю, что вы уже передали все данные до того, как он выполнит их сортировку.

Я признаю, что этот ответ, вероятно, излишний (и с опозданием более 2 лет) для ваших требований, но я действительно раздражаюсь, когда разработчикив моей области упускать из виду эту точку.Поэтому я надеюсь, что кто-то другой поймет это.

Я чувствую себя лучше.

6 голосов
/ 29 мая 2013

Мне нравится этот принятый ответ, однако редко вы получаете требования для сортировки 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, либо отключить проверку MIME-типов в Chrome, чтобы демо-версия работала.Это зависит от плагина sortElements, связанного принятым ответом, как внешнего ресурса.Просто на голову!

5 голосов
/ 04 сентября 2018

Это хороший способ сортировки таблицы: 

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

4 голосов
/ 07 октября 2011

Вот диаграмма, которая может быть полезна для решения, какой использовать: http://blog.sematext.com/2011/09/19/top-javascript-dynamic-table-libraries/

2 голосов
/ 03 апреля 2016

Вы можете использовать плагин 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')
    });
  });
});

Рабочий пример на скрипке

1 голос
/ 03 марта 2019

Этот не зависает браузер / ы, легко настраивается далее: 

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() 
}
Страница:
...