Руководство: использование jQuery Table плагина — делаем таблицу удобной

Работа с таблицами в WEB-интерфейсе может быть намного удобнее работы в том же Excel`е. Можно организовать пользовательские элементы самостоятельно, но зачем? Одна строка JS кода и подключенный плагин — готово.

Плагин jQuery Table — это профессиональный инструмент для работы с HTML-таблицами. Он обладает огромным функционалом, который включает в себя:

• Сортировку по любому столбцу;
• Быстрый поиск по таблице;
• Пагинацию;
• Лимит на отображение кол-ва элементов;
• Адаптивный дизайн таблицы.

Особенно хочется отметить, адаптивный дизайн таблицы HTML — это извечная проблема для верстальщика. Спору нет, загонять контент в ячейки и позиционировать их без «ползания», весьма удобно. Однако, когда речь идет о просмотре таблицы на мобильном устройстве, то здесь начинаются проблемы. Порой, неразрешимые.

Итак, пришло время ознакомиться с тем, как нам преобразовать таблицу. Готовый результат можно посмотреть здесь. Скачиваем архив из источника, либо подключаем файлы CSS и JS через ресурс CDN:

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

И давайте начнем с самого простого примера, допустим, имеем следующую HTML-таблицу:

  <table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
        </tbody>
    </table>

И без какого-либо CSS-кода, объявляем нашу таблицу в скриптах:

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

В данном случаем, Вы получите все параметры таблицы по-умолчанию. В большинстве вариантах, этих настроек бывает достаточно. Однако, данный плагин jQuery Table не был таким популярным, если бы не обладал потрясающей гибкостью. Отключаем сортировки и пагинацию:

$(document).ready(function() {
    $('#example').DataTable( {
        "paging":   false,
        "ordering": false,
        "info":     false
    } );
} );

Все просто и корректно работает. Давайте организуем сортировку по-умолчанию по любому необходимому полю:

$(document).ready(function() {
    $('#example').DataTable( {
        "order": [[ 3, "desc" ]]
    } );
} );

где, "order": [[ 3, "desc" ]] - это третий (с 0) столбец и по убыванию. Скрываем колонки и убираем из быстрого поиска:

$(document).ready(function() {
    $('#example').DataTable( {
        "columnDefs": [
            {
                "targets": [ 2 ],
                "visible": false,
                "searchable": false
            },
            {
                "targets": [ 3 ],
                "visible": false
            }
        ]
    } );
} );

Таблица с горизонтальной прокруткой:

$(document).ready(function() {
    $('#example').DataTable( {
        "scrollX": true
    } );
} );

Очень удобно также указывать и языковые настройки:

$(document).ready(function() {
    $('#example').DataTable( {
        "language": {
            "lengthMenu": "Выводить _MENU_ записей на страницу",
            "zeroRecords": "Ничего не найдено, извините",
            "info": "Показано страниц _PAGE_ из _PAGES_",
            "infoEmpty": "Нет данных",
            "infoFiltered": "(фильтр по _MAX_ кол-ву записей)"
        }
    } );
} );

Конечно, одним из полезных свойств плагина является его поддержка технологии AJAX:

$(document).ready(function() {
    $('#example').DataTable( {
        "ajax": "data/arrays.txt"
    } );
} );

просто указываем текстовый файл, где будут располагаться массивы со столбцами вида:

[
    "Tiger Nixon",
    "System Architect",
    "Edinburgh",
    "5421",
    "2011/04/25",
    "$3,120"
]

Плагин jQuery Table имеет понятную документацию, которая ответить на все вопросы. Вряд ли, у Вас найдутся задачи, которые не смог бы решить этот инструмент.

Все полезные ссылки находятся на странице источника. Там же Вы можете задать вопрос автору плагина. Удачи!