DataTables является плагином для jQuery JavaScript библиотека. Это - очень гибкий инструмент, основанный на основах прогрессивного улучшения, которое добавит усовершенствованные средства управления взаимодействием к любой таблице HTML.

Не путайте этот тег с таблицей данных с, для конструкции таблицы на другом языке как тип DataTable.NET! Используя оба тега вместе должен только быть сделан при отображении.NET содержание DataTable как jQuery DataTables в веб-странице.

Основные характеристики:

• Разбиение на страницы переменной длины
• На лету фильтрация
• Многостолбцовая сортировка с обнаружением типа данных
• Умная обработка отформатированных данных для цели дисплея и фильтра/вида
• Умная обработка ширины столбцов
• Данные дисплея почти из любого источника данных
• DOM, массив JavaScript, файл Ajax и обработка серверной стороны (PHP, C#, Perl, Ruby, AIR, Механизмы, Python, и т.д.)
• Прокрутка опций для области просмотра таблицы
• Полностью internationalisable
• поддержка jQuery UI ThemeRoller
• Горное тело - поддержанный комплектом 2 600 + модульные тесты
• Большое разнообразие плагинов inc. TableTools, FixedColumns, KeyTable и больше
• Это свободно!

Ресурсы:

• Использование
• Примеры
• моделирование
• API
• Разработка
• Отдельно оплачиваемые предметы
• Плагины
• Блог
• FAQ
• Форумы
• Примеры серверной стороны

Кодирование:

Добавьте последнюю версию всех библиотек

<link href="//cdnjs.cloudflare.com/ajax/libs/datatables/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet" > <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/datatables/1.10.7/js/jquery.dataTables.min.js"></script> 

HTML-таблица по умолчанию

Чтобы DataTables смог улучшить HTML-таблицу, таблица должна быть допустимой, хорошо отформатированный HTML, с заголовком (thead) и тело (tbody). Дополнительный нижний колонтитул (tfoot) может также использоваться.

<table id="example" class="display"> <thead> <tr> <th>Company name</th> <th>Address</th> <th>Town</th> </tr> </thead> <tbody> <tr> <td>Emkay Entertainments</td> <td>Nobel House, Regent Centre</td> <td>Lothian</td> </tr> <tr> <td>The Empire</td> <td>Milton Keynes Leisure Plaza</td> <td>Buckinghamshire</td> </tr> </tbody> </table> 

Инициализация плагинов:

После того, как надлежащие включают необходимого JavaScript/JQuery libraries плагин может быть инициализирован с некоторыми строка кода. Текст после # символ и id атрибут таблицы должен быть идентичным.

$(document).ready(function() { $('#example').dataTable(); }); 

Скрипка:

• При задавании вопросов это - хорошая идея обеспечить Скрипку или Мусорное ведро JS, которое воспроизводит проблему. Это значительно увеличивает возможность для других отладить Ваши проблемы.