datatablesНачало работы с данными


замечания

Ключевая особенность

  • Отображение переменной длины
  • Фильтрация на лету
  • Сортировка нескольких столбцов с обнаружением типа данных
  • Умная обработка ширины столбцов
  • Отображение данных практически из любого источника данных
  • DOM, массив JavaScript, обработка Ajax и серверная обработка
  • Параметры прокрутки для окна просмотра таблицы
  • Полностью интернационализируется
  • Поддержка JQuery UI ThemeRoller
  • Широкий выбор плагинов
  • Это бесплатно

Ресурсы

Версии

Версия Примечания к выпуску Дата выхода
1.9 и ранее (наследие) https://datatables.net/forums/discussion/8332/datatables-1-9-0-released 2014-02-01
1.10 и более поздние https://datatables.net/new/1.10 2015-08-12

API DataTables

DataTables поставляется с обширным API, который используется для управления или получения информации о таблицах данных на странице.

Доступ к API можно получить тремя способами:

var table = $('#tableid').DataTable(); //DataTable() returns an API instance immediately
var table = $('#tableid').dataTable().api(); //dataTable() returns a jQuery object
var table = new $.fn.dataTable.Api('#tableid');
 

После того как объект был установлен, вы можете вызвать любую из функций API на этом объекте.

var columns = table.columns();
 

Более сложным примером является добавление некоторых строк в таблицу:

table.rows.add( [ {
        "name":       "John Doe",
        "employee_id":   "15135",
        "department":     "development",
    }, {
        "name":       "Jane Smith",
        "employee_id":   "57432",
        "department":     "quality assurance",
    } ] )
    .draw();
 

Полный список функций API можно найти здесь .

Включение / выключение функции (параметры DataTables)

DataTables имеет возможность включать или отключать ряд своих функций, таких как поисковый вызов или поиск. Чтобы выбрать эти параметры, просто выберите их при инициализации:

$(document).ready(function() {
    $('#tableid').DataTable( {
        "paging":   false, //Turn off paging, all records on one page
        "ordering": false, //Turn off ordering of records
        "info":     false  //Turn off table information
    } );
} );
 

Обратите внимание, что кавычки вокруг имен опций являются необязательными:

paging: false,
ordering: false,
info: false
 

Также отлично.

Полный список опций можно найти здесь , а также описания использования каждой опции.

Эти параметры можно установить только один раз, когда таблица инициализируется. Однако вы можете обойти это ограничение, добавив:

 destroy: true
 

Инициализация минимальных таблиц данных:

Следующий код превратит таблицу с идентификатором tableid в DataTable, а также вернет экземпляр API DataTables:

$(document).ready(function() {
    $('#tableid').DataTable();
});
 

Сравните это с приведенным ниже кодом, который превратит таблицу в DataTable, но не вернет экземпляр API DataTables:

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

Дополнительную информацию о том, что можно сделать с помощью экземпляра API DataTables, можно найти в разделе документации API DataTables.

Монтаж

CSS файлы JavaScript и CSS включенные в ваш index.html . Вы можете сделать это, используя доступные CDN-файлы по следующим путям:

<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.12/css/jquery.dataTables.css">
  
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.js"></script>
 

Или путем загрузки отдельных локальных файлов и размещения их самостоятельно. Чтобы получить полный пакет необходимых файлов JavaScript и CSS посетите построитель загрузки DataTables, который позволит вам выбрать и выбрать нужные вам компоненты и объединить их в один пакет (или предоставить отдельные файлы). Включите их в порядке, отображаемом в нижней части страницы.

DataTables зависит от jQuery , поэтому jquery.dataTables.js его перед jquery.dataTables.js :

<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
 

Таблицы данных также доступны через NPM

npm install datatables.net    # Core library
npm install datatables.net-dt # Styling
 

и Бауэр

bower install --save datatables.net
bower install --save datatables.net-dt