На этом шаге мы рассмотрим основные параметры этого плагина.
Материал этого шага базируется на http://www.tablesorter.ru/docs/#Compatibility. Там же можно найти большое количество примеров использования этого плагина.
Tablesorter имеет большое количество параметров, некоторые из которых приведены в таблице 1.
Свойство | Тип | По умолчанию | Описание |
---|---|---|---|
cancelSelection | Boolean | true | Указывает, должен ли tablesorter запрещать выделение текста в заголовке таблицы (TH). Делает заголовок большой кнопкой |
cssAsc | String | "headerSortUp" | Стиль css, форматирующий заголовок при сортировке по возрастанию. Пример:
th.headerSortUp { background-image: url(../img/small_asc.gif); background-color: #3399FF; } |
cssDesc | String | "headerSortDown" | Стиль css, форматирующий заголовок при сортировке по убыванию. Пример:
th.headerSortDown { background-image: url(../img/small_desc.gif); background-color: #3399FF; } |
cssHeader | String | "header" | Стиль css, форматирующий заголовок в первоначальном, неотсортированном виде. Пример:
th.header { background-image: url(../img/small.gif); cursor: pointer; font-weight: bold; background-repeat: no-repeat; background-position: center left; padding-left: 20px; border-right: 1px solid #dad9c7; margin-left: -1px; } |
debug | Boolean | false | Параметр определяет, должен ли tablesorter отображать отладочную информацию, полезную для разработчика |
headers | Object | null | Объект с инструкцией для управления колонкой в формате:
headers: { 0: { option: setting }, ... } headers: { 0: { sorter: false}, 1: {sorter: false} } |
sortForce | Array | null | Используется для добавления дополнительной принудительной сортировки, применяемой, когда пользователь меняет сортировку в других колонках. Например, может применяться для сортировки людей по алфавиту после какого-либо другого способа сортировки, выбранного пользователем до этого, когда первая сортировка выдала одинаковый результат для нескольких элементов – числа или даты. Это препятствует выводу зависимых данных в случайном порядке |
sortList | Array | null | Массив с инструкциями по колонкам сортировки и порядке в формате [[ИндексКолонки, НаправлениеСортировки], ... ] где ИндексКолонки - номер колонки, начинающийся с нуля и считающийся слева направо, а НаправлениеСортировки равно 0 при сортировке по возрастанию и 1 - по убыванию. Пример аргументов для сортировки по возрастанию сначала первой колонки, а потом второй выглядит вот так: [[0,0],[1,0]] |
sortMultiSortKey | String | shiftKey | Клавиша, используемая для выбора более чем одной колонки при многостолбцовой сортировке. По умолчанию - shift. Также можно использовать ctrlKey, altKey |
textExtraction | String Or Function | simple | Определяет, при помощи какого метода извлекать данные из ячейки таблицы для дальнейшей сортировки. Встроенные методы - "simple"
и "complex". Есть смысл использовать "complex", если Ваши данные обрмлены тегами в ячейке таблицы как:
<td><strong><em>Тверская 13</em></strong></td>. Complex может быть медленным
при больших таблицах, так что подумайте, может нужно написать свою функцию, вроде "myTextExtraction", приведенной ниже:
var myTextExtraction = function(node)
{
// извлекаем данные из тегов
// и возвращаем их
return node.childNodes[0].
childNodes[0].innerHTML;
}
$(document).ready(function()
{
$("#myTable").tableSorter(
{textExtraction: myTextExtraction} );
}
);
|
widthFixed | Boolean | false | Указывает должен ли tablesorter применять фиксированную ширину к столбцам таблицы. Эта функция полезна при использовании плагина Pager. Требует плагина jQuery dimension |
На следующем шаге мы рассмотрим элемент управления jqGrid .