The DataTables plugin doesn't seems to permit to customize th rendering.

We can customize cell rendering at initialization using aTargets and mRender:

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

How can i do the same thing for table headers?

Note: I use Show and Hide feature so I can't modify directly the sTitle in aoColumns.

EDIT

I want to rename column title in order to minimize column width. I got sTitle like this: "foo_bar". For now I am using this but it's not the best way for sure:

'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>"));                                        
        }
    });
}

Thanks @kabstergo for hints! I don't close this question because my solution is not "clean".

The DataTables plugin doesn't seems to permit to customize th rendering.

We can customize cell rendering at initialization using aTargets and mRender:

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

How can i do the same thing for table headers?

Note: I use Show and Hide feature so I can't modify directly the sTitle in aoColumns.

EDIT

I want to rename column title in order to minimize column width. I got sTitle like this: "foo_bar". For now I am using this but it's not the best way for sure:

'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>"));                                        
        }
    });
}

Thanks @kabstergo for hints! I don't close this question because my solution is not "clean".

• javascript
• datatables

Share Improve this question Follow edited Jul 12, 2013 at 9:11 fdubrez asked Jul 10, 2013 at 11:35 fdubrezfdubrez 12211 gold badge33 silver badges1010 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

yes you can customize the header and footer, since nobody answered to you ill try to give you a start. note: im no expert in the matter of how datatables work internally.

in our website here we have datatables with custom header. and this is made by doing this

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;
  }
});

like i said, i hope it help you with something to start ...

In DataTables ^1.10, there is a headerCallback hook you can provide in the initialization options.

Example

($ is jQuery)

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

Note that the first parameter might actually be the first tr inside the thead, not necessarily the thead element itself, contrary to what is stated in the DataTables documentation.

In plex scenarios with multiple header rows (trs), you might need to select like this:

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