Datatables: aaData, aoColumns, mData, mRender
/*
* Данный пример иллюстрирует, как можно заполнять таблицу данными, приходящими аякс запросом,
* а также как корректно обновлять данные таблицы
*
* Подробнее: http://www.datatables.net/usage/columns
*/
/*
* HTML, template
*
* <table id="super-table">
* <thead>
* <tr>
* <th>Дата и время</th>
* <th>Операция</th>
* <th>Реквизиты</th>
* <th>Сумма</th>
* </tr>
* </thead>
* <tbody>
* </tbody>
* </table>
*
*/
/*
* JavaScript
* aaData - массив данных
* aoColumns - даёт возможность рендерить каждый столбец по очереди (http://www.datatables.net/usage/columns)
*/
var data = this.collection.toJSON()[0].payments; // массив данных, которыми необходимо наполнить таблицу
this.table = $("#super-table").dataTable({
"aaSorting": [[ 0, "desc" ]],
"bPaginate": false,
"aaData" : data, // [Object, Object, Object] - массив для 3х строк таблицы
"aoColumns": [ // перечисляем каждый столбец по очереди
{ "mData": 'authorizationTime' }, // первый стоблбец, равносильно data[n].authorizationTime
{ "mData": 'article.title' }, // второй стоблбец, равносильно data[n].article.title
// если нам нужно выполнить какие-либо действия перед рендером столбца используем связку mData + mRender
// source = aaData
{
"mData": function(source) {
var resObj = {
'shortInfo' : source.shortInfo,
'transId' : source.transId,
}
return resObj;
},
'mRender': function(resObj) {
var res = '<a href="#!all-payment-history/card-payment/' + resObj.transId + '" >' + resObj.shortInfo + '</a>';
return res;
}
},
//
{
"mData": 'sum',
'mRender': function(sum) {
return sum/100; //делим на 100 - перевод из коппек в рубли
}
},
],
"sDom": 'tp',
"oLanguage": { //перевод
"sEmptyTable": "В таблице нет данных",
"sInfo": "_END_ из _TOTAL_", //Всего _TOTAL_ выведены с _START_ по _END_
"sInfoEmpty": "Нет данных для вывода",
"sInfoFiltered": " - Фильтруются _MAX_ записей",
"oPaginate": {
"sFirst" : "Первая",
"sLast" : "Последняя",
"sNext" : "След.",
"sPrevious": "Пред."
},
"sLengthMenu": "_MENU_ элементов на страницу",
"sLoadingRecords": "Пожалуйста подождите - идет загрузка...",
"sProcessing" : "Пожалуйста подождите - идет загрузка...",
"sSearch": "Поиск:",
"sZeroRecords": "Ничего не найдено"
}
});
/*
* обновляются данные очень просто
*/
this.table.fnClearTable();
this.table.fnAddData(newData);