Настроить рендеринг в datatables

Question

Плагин DataTables, похоже, не позволяет настраивать рендеринг.

Мы можем настроить рендеринг клеток при инициализации с использованием aTargets и mRender:

"aoColumnDefs": [{ 
    "aTargets": [transaction_id_index], 
"mRender": function (data, type, row) { 
    return 'custom '+data; 
    } 
}] 

Как я могу сделать то же самое для заголовков таблицы?

Примечание: Я использую функцию Show and Hide, поэтому я не могу напрямую изменить sTitle в aoColumns.

EDIT

Я хочу, чтобы переименовать заголовок столбца, чтобы минимизировать ширину столбца. Я получил sTitle вот так: «foo_bar». Сейчас я использую это, но это не самый лучший способ точно:

'fnInitComplete': function(oSettings, json){ 
    $(table).find("thead tr th").each(function(index) { 
     $(this).html($(this).html().split("_").join("<br>")); 
    }); 
}, 
"fnDrawCallback": function(oSettings) { 
    // TO IMPROVE 
    $(table).find("thead tr th").each(function() { 
     if($(this).text().indexOf("_") !== -1) { 
      $(this).html($(this).text().split("_").join("<br>"));           
     } 
    }); 
} 

Благодаря @kabstergo намеков! Я не закрываю этот вопрос, потому что мое решение не «чистое».

Answer 1

Да, вы можете настроить верхний и нижний колонтитулы, так как никто не отвечал вам, старайтесь дать вам начало. примечание: im не эксперт в вопросе о том, как данные работают внутри.

на нашем сайте здесь у нас есть данные с настраиваемым заголовком. и это сделано, делая это

var table = $('#my-datatable'); 
table.dataTable({ 
    ... 
    'sDom': '<"dataTables_header"lfr>t<"dataTables_footer"ip>', 
    'fnInitComplete': function(oSettings){ 
    // Style length select 
    table.closest('.dataTables_wrapper').find('.dataTables_length select').addClass('select blue-gradient glossy').styleSelect(); 
    tableStyled = true; 
    } 
}); 

, как я сказал, я надеюсь, что это поможет вам с чем-то, чтобы начать ...

Answer 2

В DataTables^1,10, есть headerCallback крючок вы можете предоставить в инициализации опции.

Пример

($ является JQuery)

$('#example').DataTable({ 
    headerCallback: function headerCallback(thead, data, start, end, display) { 
     $(thead) 
      .find('th') 
      .first() 
      .html('Displaying ' + (end - start) + ' records'); 
    } 
}); 

Обратите внимание, что первый параметр может быть на самом деле первый tr внутри thead, не обязательно thead сам элемент, вопреки тому, что сказано в документации DataTables.

В сложных сценариях со строками заголовка (множественный tr с), возможно, потребуется выбрать, как это:

$('#example').DataTable({ 
    headerCallback: function headerCallback(thead, data, start, end, display) { 
     $(thead) 
      .closest('thead') 
      .find('th') 
      .first() 
      .html('Displaying ' + (end - start) + ' records'); 
    } 
});