вид таблицы jQuery
У меня есть очень простая HTML-таблица с 4 столбцами:
Facility Name, Phone #, City, Specialty
Я хочу, чтобы пользователь смог отсортировать по названию Средства и Городу только.
Как я могу кодировать это использование jQuery?
2 ответа
Если вы хотите избежать наворотов, то могу предложить этот простой 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;
});
});
И демо. (щелкните заголовки столбцов «город» и «объект» для сортировки)
На сегодняшний день самый простой вариант, который я использовал: http://datatables.net/
Удивительно простой... только убедитесь, что если вы пойдете по пути замены DOM (например, создадите таблицу и позволите DataTables переформатировать ее), то убедитесь, что ваша таблица отформатирована с помощью Есть также поддержка AJAX и т.д. Как и все действительно хорошие части кода, это также ОЧЕНЬ легко отключить. Вы будете удивлены, что вы можете использовать, хотя. Я начал с "голой" таблицы DataTable, которая сортировала только одно поле, а затем понял, что некоторые функции действительно актуальны для того, что я делаю. Клиенты в восторге от новых возможностей. Бонусные очки DataTables за полную поддержку ThemeRoller.... Мне также повезло с tablesorter, но он не так прост, не так хорошо документирован и имеет только хорошие возможности. и , иначе она не будет работать. Это единственная загвоздка.
Похожие вопросы: