API column().render()

CuskitLimited · August 2018

My aim is to have a generic footerCallback that uses an object in the same format as a row of the data that will work for every table I'm using.

To do this I'm trying access the renderer defined against a column so that when adding values to the footer I can render values using the same function as the cells in the body of the table.

For example I want to call dt.columns(4).render(1234.5, 'display') on a column with render: $.fn.dataTable.render.number( ',', '.', 2, '£' ) and output £1,234.50.

I've managed to put together a very nasty hack to get my desired result but it involves changing the value of the first cell in the column and using that to call render.

$.fn.dataTable.Api.register( 'column().render()', function (value, type) {
    var cell = this.cell(this.nodes()[0]);
    var originalData = cell.data();
    cell.data(value);
    var output = cell.render(type);
    cell.data(originalData);
    return output;
} );

I couldn't see any way to access the columns render setting through the API so that was the only way I could get it to work.
Is there any way of doing something like this that accesses the columns renderer directly?

allan · August 2018

Do you want to get the rendered data for the whole column - if so, use:

table.cells( null, columnIndex ).render( 'display' );

(i.e. select all of the cells in a column - basically a column selector!). DataTables 2 has a column().render() method committed into it already you'll be pleased to hear.

However, if you want to use a column renderer directly use:

var numberRenderer = $.fn.dataTable.render.number( ',', '.', 2, '£' );

Then for the column columns.render option assign numberRenderer to it.

In the footer calculations use numberRenderer.display( numberToRender );

Allan

CuskitLimited · August 2018

Good to hear it's already in DT2 - is there a planned timescale on that update or is it too early to say yet?

Expanding on your suggestion, I could create an array and put the renderers in there against the column indexes and use that to define the table instead. Something like:

    var renderers = [
        $.fn.dataTable.render.text(),
        $.fn.dataTable.render.text(),
        $.fn.dataTable.render.number(',','.',0),
        $.fn.dataTable.render.number(',','.',2, '£'),
        $.fn.dataTable.render.number(',','.',2, '£')
    ];
    $('#myTable').dataTable({
        ...
        columns: [
            {
                'render':renderers[0],
                ...
            },      
            {
                'render':renderers[1],
                ...
            },
            ...
        ],
        ...
    });

and can then call renderers[4].display(1234.5) in the footer.

API column().render()

API column().render()

Answers

Howdy, Stranger!

Categories

DataTables

API column().render()

API column().render()

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables