Динамически сортировать HTML-таблицу с категориями строк

Question

Есть несколько хороших библиотек JS, чтобы сделать HTML-таблицы динамически доступными на клиенте, но я не смог найти тот, который обрабатывает строки, которые классифицируются. Вот небольшой пример вида таблицы я имею в виду:

╔═══╦═════════╦═══════╦══════════════╗ 
║ ║ Name▾ ║ Zip ║  Pet  ║ 
╠═══╬═════════╬═══════╬══════════════╣ 
║ ║ Alice ║ 14124 ║ Squirrel  ║ 
║ A ║ Alfred ║ 24601 ║ Meerkat  ║ 
║ ║ Anupam ║ 91532 ║ Gila monster ║ 
╠═══╬═════════╬═══════╬══════════════╣ 
║ ║ Bernice ║ 03413 ║ Rock   ║ 
║ B ║ Boris ║ 32610 ║ Fish   ║ 
║ ║ Betty ║ 71011 ║ Elephant  ║ 
╚═══╩═════════╩═══════╩══════════════╝ 

Кто-нибудь написал таблицу сортировщик, который будет автоматически разбит на столбец категоризации, когда таблица отсортирована по Zip или Pet столбцов (так что теперь он выглядит это:

╔═══╦═════════╦═══════╦══════════════╗ 
║ ║ Name ║ Zip▾ ║  Pet  ║ 
╠═══╬═════════╬═══════╬══════════════╣ 
║ B ║ Bernice ║ 03413 ║ Rock   ║ 
║ A ║ Alice ║ 14124 ║ Squirrel  ║ 
║ B ║ Boris ║ 22310 ║ Fish   ║ 
║ A ║ Alfred ║ 24601 ║ Meerkat  ║ 
║ B ║ Betty ║ 71011 ║ Elephant  ║ 
║ A ║ Anupam ║ 91032 ║ Gila monster ║ 
╚═══╩═════════╩═══════╩══════════════╝ 

) и повторно слить его снова, когда таблица сортируется по имени? В противном случае, как насчет сортировщика таблиц, который знает, как сортировать только в пределах категорий, оставив при этом порядок категорий в одиночку? (Это приемлемо для реальной таблицы, которую я хочу сортировать, хотя, очевидно, не для этого примера игрушек.)

Я также буду рад принять лучшие идеи для этой ситуации, если у кого-то есть.

Answer 1

Хорошо, я попытался создать код для вашей проблемы. Это не лучший способ сделать это, но, похоже, он работал хе-хе. Сообщите мне, если это хорошо для вас, и если да, если вы в порядке, чтобы реализовать его так, как вы хотите.

я буду стараться улучшить его и превратить его в плагин JQuery:

http://jsfiddle.net/chambs/TRnP7

var letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split(''); 

var data = [ 
    {name: 'Alice', zip: '14124', pet: 'Squirrel'}, 
    {name: 'Alfred', zip: '24601', pet: 'Meerkat'}, 
    {name: 'Anupam', zip: '91532', pet: 'Gila monster'}, 
    {name: 'Bernice', zip: '03413', pet: 'Rock'}, 
    {name: 'Boris', zip: '32610', pet: 'Fish'}, 
    {name: 'Betty', zip: '71011', pet: 'Elephant'} 
]; 

var lastType = ''; 

function getHeader() { 
    var row = this[0], 
     header = []; 
    for(var k in row) { 
     header.push(k); 
    } 
    return header; 
} 

function sortBy(criteria) { 
    lastType = criteria; 
    var c = criteria || 'name'; 
    return this.sort(function(a, b) { 
     return a[c] > b[c]; 
    }); 
} 

function render(tbl, data) { 
    tbl.empty(); 
    var buffer = "<tr><th class='letter'>&nbsp;&nbsp;</th>", 
     header = getHeader.call(data); 
    for(var i=0; i < header.length; i++) { 
     buffer += "<th class='sort' data-type='"+header[i]+"'>"+header[i]+"</th>"; 
    } 
    buffer += "</tr>"; 
    tbl.append(buffer); 
    buffer = ""; 

    for(var i=0; i < data.length; i++) { 
     var l = data[i].name.substr(0, 1); 
     buffer += "<tr><td class='"+l+"'>" + l + "</td>"; 
     for(var j=0; j < header.length; j++) { 
      var k = header[j]; 
      buffer += "<td>" + data[i][k] + "</td>"; 
     } 
     buffer += "</tr>"; 
     tbl.append(buffer); 
     buffer = ""; 
    } 

    if(lastType === 'name') { 
     merge(tbl); 
    } 

} 

function merge(tbl) { 
    for(var i=0; i < letters.length; i++) { 
     var l = letters[i]; 
     var td = $('.' + l, tbl); 
     if(td.length > 1) { 
      td.eq(0).attr('rowspan', td.length); 
      $('.' + l + ':gt(0)', tbl).remove(); 
     } 
    } 
} 

sortBy.call(data, 'name'); 
render($('#tbl'), data); 
$(document).on('click', '.sort', function(ev) { 
    var type = $(this).data('type'); 
    sortBy.call(data, type); 
    render($('#tbl'), data); 
});