Работа с jQuery DataTables

 <table id="example"> <thead> <tr><th class="site_name">Name</th><th>Url </th><th>Type</th><th>Last modified</th></tr> </thead> <tbody> </tbody> </table> 

Теперь давайте применим DataTables к этой таблице.

 $("#example").dataTable({ "aaData":[ ["Sitepoint","http://sitepoint.com","Blog","2013-10-15 10:30:00"], ["Flippa","http://flippa.com","Marketplace","null"], ["99designs","http://99designs.com","Marketplace","null"], ["Learnable","http://learnable.com","Online courses","null"], ["Rubysource","http://rubysource.com","Blog","2013-01-10 12:00:00"] ], "aoColumnDefs":[{ "sTitle":"Site name" , "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] == "Blog") ? new Date(date).toDateString() : "N/A" ; } }] }); 

Теперь наша таблица будет такой, как показано ниже. У нас есть кликабельная ссылка в столбце URL всех записей, и последний измененный столбец выглядит довольно аккуратно.

Мы дали массив json, используя опцию aaData объекта DataTables. Если вы посмотрите на код, вы увидите параметр « aoColumnDefs », переданный в DataTables, которые имеют массив некоторых объектов. aoColumnDefs основном определяет способ отображения каждого столбца в таблице. С помощью этого свойства вы можете изменить любой произвольный столбец в таблице, указанный свойством aTargets объекта.

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

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

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

Аналогично для последнего обновленного столбца мы проверяем значение в третьем столбце каждой строки. Если это блог, функция вернет отформатированную дату, иначе вернет «N / A».

sType « sType » помогает нам указать ожидаемый тип этого столбца, который решает, как значения будут отсортированы для этого столбца. По умолчанию DataTables поддерживает четыре типа: строковые, числовые, даты и HTML. Вы можете расширить его, определив пользовательские типы. Здесь мы определили тип как «дата» и, следовательно, он будет использовать сортировку по дате. В противном случае он будет считать столбец просто строкой, и сортировка может не иметь никакого смысла.

Серверная обработка

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

Каждый раз при визуализации таблицы DataTables отправляет на сервер запрос с указанием количества параметров, включая начальную точку, длину отображения, данные поиска, столбец сортировки и т. Д. Сервер может использовать их в запросе SQL для фильтрации данных и отправки их обратно клиенту. DataTables ожидают, что несколько атрибутов в возвращенных данных JSON будут правильно отображать их во внешнем интерфейсе. Они есть:

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

И ответ json от сервера может выглядеть примерно так:

 { "iTotalRecords": 50, "iTotalDisplayRecords": 10, "sEcho":10, "aaData": [ {"name": "Sitepoint", "url": "http://sitepoint.com", "editor" :{ "name" : "John Doe", "phone" : ["9191919", "1212121"], "email":[]}}, {"name": "Flippa", "url": "http://flippa.com", "editor": { "name": "Adam Smith", "email" : ["[email protected]"], "phone":[] }} ] } 

 $("#example").dataTable({ "bServerSide": true, "sAjaxSource": "http://localhost/data_source.json", "aoColumns": [{ "mData":"name", "sTitle": "Site name" },{ "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>"); } }] }); 

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

 $("#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")); } });