Datatables: aaData, aoColumns, mData, mRender

Datatables: aaData, aoColumns, mData, mRender.js

/*
 * Данный пример иллюстрирует, как можно заполнять таблицу данными, приходящими аякс запросом,
 * а также как корректно обновлять данные таблицы 
 * 
 * Подробнее: 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);