jQuery DataTables

DataTables это мощный плагин jQuery для создания таблиц и списков. Плагин jQuery DataTables способен сделать таблицу с поиском, сортировкой и разбитие на страницы без каких-либо особых настроек. В этой статье мы рассмотрим DataTable и некоторые дополнительные функции.

Приступая к работе

Сначала нужно скачать библиотеку DataTables. Если Вы не хотите, скачивать файлы, можете воспользоваться Microsoft CDN. Его необходимо подключить как и плагин jQuery и тоже желательно последней версии.

DataTables позволяет работать с данными напрямую в HTML, указать данные в виде массива во время инициализации. Или можем работать с данными, источник которых поступает из Ajax и MySQL.

к меню ↑

Условные обозначения

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

n — переменная представляет собой узел.
o — переменная представляет объект.
a — переменная представляет собой массив.
s — переменная строка.
b — логический тип.
f — расположение.
i — переменная содержит целое значение.
fn — переменная представляет собой функцию.

Иногда вы будете видеть несколько префиксов используемых вместе, напоминающий собой массив объектов.

Давайте посмотрим, что DataTables может сделать с минимальными настройками.

<html>
<head>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
  <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.12/datatables.min.js"></script>
</head>
<body>
<table id="example" class="display" width="100%" cellspacing="0">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
            </tr>
            <tr>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
            </tr>
       </tbody>
    </table>
  <script>
  $(function(){
    $("#example").dataTable();
  })
  </script>
</body>
</html>

Сначала мы подключили таблицу стилей CSS, а дальше файлы JavaScript и $("#example").dataTable() который инициализирует объект .dataTable с идентификатором example.

Скопируйте и вставьте этот код в html страницу и откройте в браузере. Вы увидите красивую таблицу как показано ниже.

Таблица DataTable без настроек
Эта таблица DataTable без настроек
к меню ↑

Работа с jQuery DataTables

Теперь вы знаете на что способен DataTables. Как вы думаете трудно будет изменить функции на свои?

Для примера мы создадим список трех веб-сайтов. Начнём с перечисления нескольких узлов, а после добавим таблицы и компоненты.

Допустим, у нас есть список с подробностями: название сайта, URL, тип сайта и последние изменения, но в массив JavaScript вместо таблицы HTML. Тип может быть блогом, форумом или интернет-магазин и строка с последним обновлением. Значением null для сайтов, которые не являются блогами. В этом месте таблицы вместо значения null можно показать N/A и сделать ссылку на сайт.

Создайте таблицу HTML.

<table id="example">
  <thead>
    <tr>
        <th class="site_name">Название</th>
        <th>Адрес</th>
        <th>Тип</th>
        <th>Последние изменения</th>
    </tr>
  </thead>
</table>

Дальше применим DataTables к таблице HTML и добавим русский язык.

$("#example").dataTable({	
		
  "aaData":[
    ["htmlhook.ru","http://htmlhook.ru/","Блог","2013-10-15 10:30:00"],
    ["Новый путь","http://www.phppath.ru/","Блог","2013-09-15 09:20:00"],
    ["Портал UA","http://pixelcom.at.ua/","Интернет магазин","null"],
  ],
  "aoColumnDefs":[{
        "sTitle":"Название сайта"
      , "aTargets": [ "site_name" ]
  },{
        "aTargets": [ 1 ]
      , "bSortable": false
      , "mRender": function ( url, type, full )  {
          return  '<a href="'+url+'">' + url + '</a>';
      }
  },{
        "aTargets":[ 3 ]
      , "sType": "date"
      , "mRender": function(date, type, full) {
          return (full[2] == "Блог")
                    ? new Date(date).toDateString()
                    : "N/A" ;
      }
  }],
  
   language: {
      "processing": "Подождите...",
      "search": "Поиск:",
      "lengthMenu": "Показать _MENU_ записей",
      "info": "Записи с _START_ до _END_ из _TOTAL_ записей",
      "infoEmpty": "Записи с 0 до 0 из 0 записей",
      "infoFiltered": "(отфильтровано из _MAX_ записей)",
      "infoPostFix": "",
      "loadingRecords": "Загрузка записей...",
      "zeroRecords": "Записи отсутствуют.",
      "emptyTable": "В таблице отсутствуют данные",
      "paginate": {
        "first": "Первая",
        "previous": "Предыдущая",
        "next": "Следующая",
        "last": "Последняя"
      },
      "aria": {
        "sortAscending": ": активировать для сортировки столбца по возрастанию",
        "sortDescending": ": активировать для сортировки столбца по убыванию"
      }
  }
});

На снимке ниже показано как теперь аккуратно выглядит таблица.

Таблица DataTable с ссылками на ресурсы
Таблица DataTable с ссылками

Демо

Вариант aoColumnDefs передаёт объекты DataTable, которые имеют множество разных объектов. Свойство aoColumnDefs, в основном решает какие списки должны быть в таблице. С помощью свойства aTargets можно изменить любые произвольные списки. Массив определён с помощью json aaData вариант DataTable.

Значение массива aTargets может быть названием класса указанного в заголовке списка, индекс столбца (начиная от 0 слева направо или отрицательный показатель для справа налево) или _all сравнение всех списков таблицы. Свойство sTitle определяет заголовок для первого столбца со списком.

Значок сортировки отсутствует во втором столбце, потому что сортировка URL-адреса не имеет смысла. Поэтому в bSortable:false для соответствующего списка лучший вариант. mRender, который может быть использован для изменения данных. Этот атрибут может быть передан в ряд путей и способов. При использовании значения integer, будет использоваться в качестве индекса массива данных. Если string, то будет использовать свойство объекта json с таким названием.

Это очень удобно, особенно когда мы показываем данные из json возвращаемых сервером. Для mRender должна быть функция, которая будет вызвана при визуализации каждой ячейки этого столбца. Функция получит три параметра; значение, тип, и вернёт всю строку которую мы хотим показать на месте. Наша функция просто создала ссылку на этот URL-адрес и вернула его.

Аналогично проверяется значение для списка с последними изменениями. Если это Блог, то функция возвращает дату редактирования, если это не блог, возвратит “N/A”.

Атрибут sType позволяет нам указать нужный тип списка который решает, как значения будут отсортированы в этом списке. По умолчанию, DataTable поддерживает четыре типа объектов: string, numeric, date и HTML. Вы можете определить свои типы если нужно. Здесь мы указали тип “date”, следовательно сортировка по дате.

к меню ↑

Адаптивная таблица

Таблицу можно просматривать на маленьких экранах мобильных устройств. Для этого нужно дополнительно подключить файл CSS и JavaScript. Для таблицы HTML добавить классы.

<table id="example" class="display responsive nowrap" style="width:100%">

Вид таблицы на узком экране:

DataTables jQuery на маленьких экранах мобильных устройств
DataTables на маленьких экранах
к меню ↑

Обработка на стороне сервера

В приведенных выше примерах мы работали с обычной таблицей HTML и массивом json на стороне пользователя. В базе данных может быть слишком много записей. Чтобы извлечь все записи за один раз, нужно использовать для сервера функции обработки предоставляемые библиотекой и извлекать только те записи, которые отображаются в настоящий момент front-end.

Каждый раз когда DataTables будет отправлять запрос будет сортировка списка. Сервер может использовать их в запросе SQL для фильтрации данных и отправить их обратно пользователю. DataTables будет ждать когда вернутся несколько атрибутов в json для правильного отображения их front-end:

iTotalRecords — общее количество записей в таблице, перед применением фильтров.
iTotalDisplayRecords — количество записей, возвращаемых после применения фильтров.
sEcho — Un, измененная копия sEcho, отправляемых пользователем.
aaData — массив данных с сервера.

Ответ сервера в файле .json выглядит так:

{
    "iTotalRecords": 50,
    "iTotalDisplayRecords": 10,
    "sEcho":10,
    "aaData": [
        {"name" : "htmlhook.ru","url":"http://htmlhook.ru/","editor":{ "name" : "Блог", "phone":["7", "август"],"email":["sup.blablabla@domain.com"]}},
        {"name" : "Новый путь","url":"http://www.phppath.ru/","editor": { "name" : "Блог", "phone":["14", "сетябрь"],"email":["blablabla@domain.com"]}},
        {"name" : "Портал.ua","url":"http://pixelcom.at.ua/","editor":{ "name" : "Магазин", "phone": ["28", "октябрь"],"email" :["blablabla.admin@domain.com"]}}
        ]
}

Чтобы сделать это, создайте таблицу для html с соответствующими заголовками.

$("#example").dataTable({
  "bServerSide": true,
  "sAjaxSource": "data_source.json",
  "aoColumns": [{
    "mData":"name",
    "sTitle": "Название сайта"
  },{
    "mData": "url",
    "mRender": function ( url, type, full )  {
      return  '<a href="'+url+'">' + url + '</a>';
    }
  },{
    "mData": "editor.name"
  },{
    "mData": "editor.phone"
  },{
    "mData":"editor",
    "mRender": function(data){
      return data.email.join("<br>");
    }
  }]
});

Здесь мы заставили DataTables загружать данные с сервера, установив bServerSide в true. Также мы должны обеспечить источник данных с помощью свойства sAjaxSource. В данных json, возвращаемых сервером DataTables будет искать aaData чтобы получить данные, которые будут отображаться в таблице. Вы можете переопределить это, указав атрибут свойству sAjaxDataProp.

В этом случае мы получаем массив объектов json, поэтому мы должны сделать карту, ключ которой должен быть отображен в столбце. Мы использовали aoColumns вместо aoColumnDefs. Как сделать то же самое, но другим способом. При использовании aoColumns длина массива должна быть равна числу столбцов в таблице HTML, так что мы должны обеспечить отображение для каждого столбца.

Объекты в json это имя редактора, адрес электронной почты и телефон. mData: editor.name указывает DataTables принять свойство name. Обратите внимание что phone и email — это массивы, которые будут автоматически объединятся при помощи запятых или для лучшего вида мы можем написать пользовательскую функцию mRender.

Подробнее…

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

var oTable =  $('#example'). dataTable();
$('#example').on('click', 'tr', function(){
    var oData = oTable.fnGetData(this);
    console.log(oData);
})

После нажатия код будет записывать значение в строку. fnGetData в основном принимает узел tr/td или индекс строки, и возвращает значение в строку или ячейку.

Иногда это будет полезно сохранить текущее состояние таблицы при переходе на другую страницу. Для этого можно включить параметр сохранения состояния bStateSave:false во время инициализации. По умолчанию состояние будут сохранены в cookie. DataTables позволяет нам определить функцию обратного вызова, чтобы переопределить как хранить в Localstorage на самом сервере. Вот пример, который хранит состояние страницы в Локальном хранилище.

$("#example").dataTable({
      bStateSave : true,
      fnStateSave :function(settings,data){
        localStorage.setItem("dataTables_state", JSON.stringify(data));
      },
      fnStateLoad: function(settings) {
        return JSON.parse(localStorage.getItem("dataTables_state"));
      }
    });

Здесь fnStateSave будет вызван для сохранения состояния при просмотре страницы. В следующий раз перед тем как показать таблицу, будет вызов fnStateLoad и отобразится ранее сохраненного состояния. В версии 1.10, DataTables по умолчанию будет localStorage, чтобы сохранить значение.