JQuery сортировка таблицы без плагина

Question

Есть ли функция jquery для сортировки таблицы. Я знаю о плагине JQuery Tablesorter, но я хочу избежать использования, если это возможно.

Как FYI - таблица, в которой у меня есть заголовок с пользовательскими изображениями, указывающий восходящий и нисходящий. Тип данных может быть практически любым типом.

EDIT: Можно ли сортировать таблицу в Javascript?

Answer 1

Javascript гуру Стюарт Лэнгриддж имеет хорошую альтернативу с помощью JQuery называется tablesorter.js

http://www.kryogenix.org/code/browser/sorttable/

Я использовал его раньше; отлично работает, и это довольно легкий вес.

Answer 2

Очень возможно. Вы можете сделать это, как этот

function sortTable(table, col, reverse) { 
    var tb = table.tBodies[0], // use `<tbody>` to ignore `<thead>` and `<tfoot>` rows 
     tr = Array.prototype.slice.call(tb.rows, 0), // put rows into array 
     i; 
    reverse = -((+reverse) || -1); 
    tr = tr.sort(function (a, b) { // sort rows 
     return reverse // `-1 *` if want opposite order 
      * (a.cells[col].textContent.trim() // using `.textContent.trim()` for test 
       .localeCompare(b.cells[col].textContent.trim()) 
       ); 
    }); 
    for(i = 0; i < tr.length; ++i) tb.appendChild(tr[i]); // append each row in order 
} 

function makeSortable(table) { 
    var th = table.tHead, i; 
    th && (th = th.rows[0]) && (th = th.cells); 
    if (th) i = th.length; 
    else return; // if no `<thead>` then do nothing 
    while (--i >= 0) (function (i) { 
     var dir = 1; 
     th[i].addEventListener('click', function() {sortTable(table, i, (dir = 1 - dir))}); 
    }(i)); 
} 

function makeAllSortable(parent) { 
    parent = parent || document.body; 
    var t = parent.getElementsByTagName('table'), i = t.length; 
    while (--i >= 0) makeSortable(t[i]); 
} 

window.onload = function() {makeAllSortable();}; 

Взгляните на этой Fiddle

(я не являюсь автором кода выше или что скрипка, я только что нашел его при поиске решения.)

Answer 3

я должен был изменить функцию сортировки немного, так что будет игнорировать нечисловые символы, надеюсь, это позволит сэкономить кто-то какое-то время ....

function sortTable(table, col, reverse) { 
    var tb = table.tBodies[0], // use `<tbody>` to ignore `<thead>` and `<tfoot>` rows 
    tr = Array.prototype.slice.call(tb.rows, 0), // put rows into array 
    i; 

    reverse = ((+reverse) || -1); 

    tr = tr.sort(function (a, b) { // sort rows 
     return reverse * (Number(a.cells[col].textContent.replace(/[^\d.-]/g, '')) 
      - Number(b.cells[col].textContent.replace(/[^\d.-]/g, ''))); 
    }); 

    for(i = 0; i < tr.length; ++i) tb.appendChild(tr[i]); // append each row in order 
} 

Answer 4

Для небольших таблиц, я делаю это так ...

sortTable = function(tableName, rowClass, columnNumber, ascending) { 
    var row, cell, cellContent; 
    var comparisonRow, comparisonCell, comparisonContent; 

    $("#" + tableName + " tr." + rowClass).each(function(i) { 
     row = $("#" + tableName + " tr." + rowClass + ":eq(" + i + ")"); 
     cell = $(row).find("td:eq(" + columnNumber + ")"); 
     cellContent = $(cell).html(); 

     $("#" + tableName + " tr." + rowClass).each(function(j) { 
      comparisonRow = $("#" + tableName + " tr." + rowClass + ":eq(" + j + ")"); 
      comparisonCell = $(comparisonRow).find("td:eq(" + columnNumber + ")"); 
      comparisonContent = $(comparisonCell).html(); 

      if ((ascending && cellContent < comparisonContent) || (!ascending && cellContent > comparisonContent)) { 
       $(row).insertBefore(comparisonRow); 
       return false; 
      } 
     }); 
    }); 
}; 

Объяснение: Функция проходит по каждой строке (из заданного класса) из указанной таблицы, принимает к сведению содержание HTML (из ячейки указанного столбца), а затем просматривает все строки таблицы, сравнивая содержимое ячейки (снова из указанного столбца). Когда содержимое ячейки меньше или больше (в зависимости от того, установлено ли значение «возрастание» равным true), строка вставлена ​​перед той, к которой она была сопоставлена.

Образец вызова будет ...

sortTable("sample_table", "data_row", 0, true); 

... что бы отсортировать строки, которые имеют класс «data_row», внутри таблицы с именем «образец таблицы», на основе ячеек в первый столбец (то есть индекс столбца 0) в порядке возрастания.

Для больших таблиц и дополнительных функций, которые я использую ...

• DataTables

правой коробки, я считаю DataTables гораздо проще в использовании, чем TableSorter (например, нет необходимости для ссылок или включения дополнительных CSS и художественных работ, если вы не хотите), и документация отличная. Мне также нравится функциональность по умолчанию (например, функция поиска).