Одна из часто встречающихся задач – представление данных в табличной форме с предоставлением пользователю возможности сортировки, поиска, перехода по страницам, изменением количества записей на одной странице. Плагин jQuery DataTables легко решает все эти задачи. Правда надо заметить, что он все-таки не очень подходит для представления больших массивов данных, но большое количество практических задач решить поможет.
Сначала испытайте как работает этот плагин, а затем подробно разберем его возможности.

Вы можете скачать исходный код примера и воспроизвести этот пример на своем сайте.
* – в архиве не содержатся 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.

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

Поделиться в FaceBookПоделиться ВКонтактеДобавить в TwitterПоделиться в Моём МиреСохранить закладку в GoogleОтправить в Живую ленту GoogleДобавить в Яндекс.ЗакладкиПоделиться в ОдноклассникахОпубликовать в LiveJournal