agolomazov
8/27/2015 - 1:21 PM

Javascript: datatables

Javascript: datatables

/*DATATABLES*/


/*
 * 0) Важные настройки
 */
'sScrollX'        : '1000px',
'sScrollY'   	  : '1000px',

'sDom'		 	  : '<"topbar"Tlf>t<"bottom"pir><"nclear">',
//T - TableTools (экспорт в эксель и пр.),
//l - дропдаун с выбором отображаемых элементов на страницу,
//f - поиск
//t - сама таблица! i - информация, r - процессинг, p - пагинация

'sPaginationType' : 'full_numbers',

'bDestroy'   	  : true,

'aaSorting'  	  : [[2,'asc'], [3,'desc']],

/*
 * 1) Рендерим без шаблона
 * aaData - JSON массив данных
 * aoColumns - генерим таблицу динамически, т.е. просто на <table id="table">пусто</table>
 * вешаем $('#table').dataTable() и всё содержимое уже генерим сами
 */
'aaData'	: data,
'aoColumns' : [		
    { 
        'mData'  : 'id', // td
        'sTitle' : 'Идентификатор', // th
        'sWidth' : '100px',
        "sType"  : 'numeric'
    }
    { 
        'sTitle' : 'Действия', 
        'sWidth' : window.constants.tdActionWidth,
        'mData'  : 'id', // td
        'mRender': function(id) { // дополнительные действия перед рендером ячейки
            var html = someFunction(id);
            return html;
        }
    }
],    


/*
 * 2) Удаляем строку в таблице при клике на кнопку, находящуюся в ячейке данной строки
 * fnGetPosition(td[0]) - для получения индекса строки
 * fnDeleteRow(aPos[0]) - для удаления данной стркои
 */
deleteRow: function (ev) {
    var td = $(ev.currentTarget).parents('td'),
        dTable = this.dataTable,
        aPos = dTable.fnGetPosition(td[0]);

    dTable.fnDeleteRow(aPos[0]);
},

/*
 * 3) Обновляем данные в таблице
 * fnClearTable() - очищаем таблицу
 * fnAddData() - вставляем новые данные
 */
table.fnClearTable(); 
table.fnAddData(newdata);