На этом шаге мы рассмотрим основные параметры этого плагина.
Материал этого шага базируется на 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 .
