Сортировка заголовков таблицы jQuery

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

Как конвертировать HTML в PDF с помощью jsPDF
Как конвертировать HTML в PDF с помощью jsPDF
В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.
13
0
18 461
6

Ответы 6

Библиотека Ext JavaScript очень хорош в этом.

http://tablesorter.com/docs/ очень прост в использовании с широким набором опций для удовлетворения ваших потребностей. :)

Tableorter! - stackoverflow.com/a/9535584/665387 имеет ссылку и пример видео

Ravi Ram 02.03.2012 19:31

Немного тяжеловесный, но лучший менеджер таблиц jQuery - jqGrid

http://www.flexigrid.info/

Flexigrid - очень популярный и простой в использовании менеджер / сортировщик таблиц.

Вот два таких типа и многое другое, чего я еще не видел в списке:

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

Плагин jquery для сортировки, фильтрации и разбивки на страницы: Breedjs

Пример:

Поместите данные в объект js, чтобы сделать так:

var data = {
    people: [
        {name: 'a', address: 'c', salesperson: 'b'},
        {name: 'b', address: 'b', salesperson: 'a'},
        {name: 'c', address: 'a', salesperson: 'c'},
    ]
};

breed.run({
    scope: 'people',
    input: data
});

HTML:

<table>
    <thead>
        <tr>
            <th sort='name'>Name</th>
            <th sort='address'>Address</th>
            <th sort='salesperson'>Sales Person</th>
        </tr>
    </thead>
    <tbody>
        <tr b-scope = "people" b-loop = "person in people">
            <td b-sort = "name">{{person.name}}</td>
            <td b-sort = "address">{{person.address}}</td>
            <td b-sort = "salesperson">{{person.salesperson}}</td>
        </tr>
    </tbody>
</table>

Теперь, каждый раз, когда вы хотите отсортировать по продавцу, просто назовите его:

breed.sort({
    scope: 'people',
    selector: //field name
});

Видеть:

$("th").click(function(){
    breed.sort({
        scope: 'people',
        selector: $(this).attr('sort')
    });
});

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

Другие вопросы по теме