Вы можете скачать исходный код примера и воспроизвести этот пример на своем сайте.
* – в архиве не содержатся js-файлы, их можно скачать отдельно в разделе Download.

Нам потребуется подключить в раздел HEAD страницы несколько файлов: само собой разумеется библиотеку jQuery jquery-1.2.6.js и файл плагина jquery.dataTables.js

<script type="text/javascript" src="js/jquery-1.2.6.js"></script>
<script type="text/javascript" src="js/jquery.dataTables.js"></script>

Чтобы плагин мог корректно функционировать, при написании HTML-кода таблицы необходимо указать секции thead и tbody. Секцию tfoot указывать необязательно. Вот пример HTML-кода таблицы:

<table id="example" class="display">
  <thead>
    <tr>
      <th>Название</th>
      <th>Область</th>
      <th>Кол-во</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Данные 1</td>
      <td>Данные 2</td>
      <td>Данные 3</td>
    </tr>
      ..............
  </tbody>
  <tfoot>
    <tr>
      <th>Название</th>
      <th>Область</th>
      <th>Кол-во</th>
    </tr>
  </tfoot>
</table>

Стилевая таблица включена в файл примера – можете настроить отображение таблицы на свой вкус. Не забывайте только, что плагин использует для работы имена классов. А мы разберем теперь простейший случай использования плагина jquery.dataTables.js. Вот пример:

<script type="text/javascript">
$(document).ready(function(){
  $("#example").dataTable();
});
</script>

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

Но плагину можно передавать и свои настройки. Передадим путь к файлу с переводом на русский язык, воспользовавшись опцией oLanguage.

<script type="text/javascript">
$(document).ready(function(){
  $("#example").dataTable({
    "oLanguage": {
	"sUrl": "datatables/language/ru_RU.txt"
    }
  });
});
</script>

Поскольку по умолчанию сортировка данных в таблице происходит по возрастанию по первому столбцу, а нам наверняка может понадобиться какой-либо иной расклад, дополним наш пример и передадим плагину еще пару опций:

<script type="text/javascript">
$(document).ready(function(){
  $("#example").dataTable({
    "oLanguage": {
      "sUrl": "datatables/language/ru_RU.txt"
    },
    "iDefaultSortIndex": 2,
    "sDefaultSortDirection": "desc"
  });
});
</script>

В iDefaultSortIndex мы зададим начальную сортировку по третьему столбцу, и в sDefaultSortDirection направление сортировки укажем по убыванию.

С помощью массива объектов aoData можно управлять отображением столбцов в таблице, а также например, исключать некоторые столбцы из поиска. В следующем примере мы ничего не делаем со столбцом «Название», исключаем из поиска столбец «Область» и делаем невидимым столбец «Кол-во».

<script type="text/javascript">
$(document).ready(function(){
  $("#example").dataTable({
    "oLanguage": {
      "sUrl": "datatables/language/ru_RU.txt"
    },
    "iDefaultSortIndex": 2,
    "sDefaultSortDirection": "desc",
    "aoData": [
      /* Название */ null,
      /* Область */ { "bSearchable": false },
      /* Кол-во */ { "bVisible": false }
    ]
  });
});
</script>

Я рассказал только об основных возможностях плагина jQuery DataTables. Полный список опций, примеры использования Вы сможете отыскать на странице плагина http://www.sprymedia.co.uk/article/DataTables.

Удачи, коллеги!

Для начала посмотрите небольшой пример, а потом будем разбирать, как это работает.

Вы можете скачать исходный код примера, и при наличии библиотеки jQuery воспроизвести это пример на своем сайте.

Для начала нам потребуется подключить к странице два файла – библиотеку jQuery и файл jquery.tablednd.js. Сделаем это в разделе HEAD.

<script type="text/javascript" src="js/jquery-1.2.1.js"></script>
<script type="text/javascript" src="js/jquery.tablednd.js"></script>

Что касается стилевого оформления таблицы – здесь Вы вольны творить как угодно. В HTML-коде также ничего особенного – совершенно обычная таблица. Замечу только, что все строки таблицы (элементы tr) должны иметь атрибут id, т.е. содержать идентификатор. Ну и конечно мы должны будем иметь возможность обратиться к конкретной таблице, поэтому атрибут id должна иметь и сама таблица.

В принципе мы могли бы обращаться к таблице и по имени класса, но лучше все-таки использовать именно id – спокойнее как-то.

В самом простом варианте сделать строки перемещаемыми в таблице можно вот так:

<script type="text/javascript">
$(document).ready(function() {
    $("#table-1").tableDnD();
});
</script>

Т.е. по сути одной строкой! Все остальное – «обертка», которая отслеживаем момент готовности объектной модели документа (DOM). Но это не было бы так интересно, если бы мы не имели возможности использовать какие-либо дополнительные параметры. К счастью такая возможность есть. Я приведу список доступных опций, поясняя некоторые из них строками кода.
onDragClass – определяет имя класса, который добавляется во время перемещения строки и будет удален после того, как строка будет drop, сброшена. Вот как это выглядит в коде:

$("#table-1").tableDnD({
  onDragClass: "dragRow"
});

Для назначения стилей при перемещении строки возможно также использование опции onDragStyle, но onDragClass представляется более гибким для применения, поскольку при использовании onDragStyle, назначенные стили могут быть унаследованы например ячейками строки или другим содержимым, что не всегда приемлемо.
onDropStyle – составляет как бы пару для onDragStyle и содержит конечно же имя класса, который будет применен в момент операции drop.
onDragStart – содержит функцию, которая будет вызвана в момент начала перемещения строки. Функция принимает два параметра – таблицу и строку, которую пользователь начал перемещать.

onDragStart: function(table, row) {
    $("#messageArea").html("Перемещаем строку " + row.id);
}

onDrop – содержит функцию, которая будет вызвана в момент, когда строка «сброшена». Функция принимает два параметра – таблицу и строку, которую пользователь «сбросил». Новый порядок расположения строк можно получить, используя table.tBodies[0].rows.

Именно в onDrop я добавил пару строк кода, что бы «сброшенная» строка немного «моргнула» (правда не могу разобраться, почему-то «моргает»она только в FireFox – странно…) – все это Вы сможете увидеть в исходном коде.

В качестве содержимого ячеек вполне могут быть использованы элементы input или select. Правда здесь необходимо отметить, что присутствуют некоторые проблемы с использованием radio и checkbox в IE6. При перемещении строки эти элементы не сохраняют значение, если оно было определено.

Что еще? Ну разве можно сказать, что какие-то строки в таблице можно сделать неперемещаемыми. Для этого элементу tr необходимо добавить атрибут noDrag со значением true.

Вот теперь наверное совсем все.

Испытайте этот небольшой пример, а затем мы разберем как это сделано.

Вы можете скачать исходный код примера, и при наличии библиотеки jQuery воспроизвести это пример на своем сайте.

В раздел HEAD понадобится подключить всего два файла: библиотеку jQuery – jquery-1.2.1.js и файл ui.tablesorter.js

<script type="text/javascript" src="js/jquery-1.2.1.js"></script>
<script type="text/javascript" src="js/ui.tablesorter.js"></script>

В исходном коде примера Вы сможете посмотреть стилевую таблицу, отвечающую за отображение календаря и при необходимости отредактировать ее под свой дизайн. Эта часть кода выделена комментариями /* Стили для таблицы */.

HTML-код не представляет собой ничего интересного – это обычная таблица. Обращу внимание разве что на необходимость использования тэгов thead и tbody.

И наконец приведу очень простой код, который будет вызывать UI Tablesorter:

<script type="text/javascript">
$(document).ready(function(){
  $("#example").tablesorter({
	widgets: ["zebra"],
	sortList:[[1,0]]
  });
});
</script>

Таблица с идентификатором #example будет сортируемой. Большинство опций сортировки задано по умолчанию в самом файле ui.tablesorter.js, но мы легко можем их переопределить.
widgets: ["zebra"] – используем «фирменный» виджет, чтобы чередовать цвет строк в таблице.
sortList:[[1,0]] – задаем сортировку по умолчанию (при загрузке). В этом примере – сортировка второго столбца по возрастанию (первая цифра – порядковый номер столбца, вторая порядок сортировки, где 0 – по возрастанию, 1 – по убыванию). Здесь можно задавать сортировку и по нескольким столбцам сразу. Например: sortList:[[1,0], [0,1]] – сначала второй столбец сортируется по возрастанию, а затем первый – по убыванию…

Приведу еще пару полезных опций.
sortMultisortKey – по умолчанию задано значение shiftKey, т.е. щелкая мышью по заголовку столбца при нажатой клавише Shift можно выполнять сортировку по нескольким столбцам. Естественно клавишу можно переопределить. Например так: sortMultiSortKey: «ctrlKey». Теперь можно работать через клавишу Ctrl.
headers – с помощью этой опции можно запретить сортировку по отдельным столбцам. Например: headers: { 4: { sorter: false} } запретит сортировку пятого столбца.

Весь список опций есть на сайте разработчиков библиотеки, а я буду благодарен, если найдете возможность оставить свои отзывы…