How to pass additional meta-data, eg. template to the column.render function?

scipilot

I want to pass in a template/view fragment (e.g. moustache) and other metadata to the column render function.
Currently the way I found to acheive this was via a JS closure in the column definition, and an additional parameter.

I already have a back-end generated column definition metadata array (for various ORM entities). I want to pass in this entity definition to the renderer to generalise the process.

e.g. simplified:

// config[3] is my cell template - from backend config, but it looks a bit like this
editColumnConfig = ['title', 'type', 'blah', '<a href="edit-url?id={id}">Edit<a> <a href="other-url?id={id}">Foo<a>', ... ];

// add an "edit" column to the table with rendered links to existing app CRUD pages
columns[0] = {
    'render': function (data, type, row, meta) {
        return renderEditColumn(data, type, row, meta, editColumnConfig);
    }
});

// this renders the template
function renderEditColumn(data, type, row, meta, colspec) {
    return colspec[3].replace(/\{id\}/g, row.id);
}

Is there a more "native" way in DT to pass additional variables down into these handlers?

thanks in advance.

Shambla

I encountered this post with the classic, "That's my exact issue! ...naturally there are no answers." Each one of my columns may be displayed differently (different number of decimal places, currency signs, etc.) and this formatting data is received from the back-end.

After an hour of poking around I came up with this solution, if perhaps a bit hacky. On initialization you can pass data along:

var columnFormats = [];
columnFormats[0] = {makeReallyCool: true};
...

$("table").DataTable({
    // Standard initialization stuff
    ...
    myColumnFormats: columnFormats
});

This data can be retrieved inside the render function like so:

function(data, type, row, meta) {
    var isCool = meta.settings.oInit.myColumnFormats[meta.col].makeReallyCool;

    if(isCool) {
        return "<blink>" + data + "</blink>";
    } else {
        return data;
    }
}

glenderson

The best way I've found to make dataTables display in a cell exactly what I want, is to pass it exactly what I want.

I pass full HTML in my JSON, <span>, <div>, <input>, <select>, etc.

dataTables is very impressive with what it can do and what it can format for you, but I've just found it easier to pass <span class=\"myclass\"> instead of trying to figure out the cell formatter to give me the exact same HTML.

My method probably does not work well with Editor, I've written my own inline editing schemes so that could be an issue for you if you are using Editor.

scipilot

Thanks @shambla, that classic scene is so familiar to me! So are you saying you discovered that adding additional data to the options results in it showing up in meta.settings.oInit object? Did you find this recommended in the documentation somewhere?

I always worry something naughty like this will stop working in future versions...

scipilot

@glenderson,

Can you be a bit more specific re. "pass" - via which mechanism? In the data?

allan

Is there a more "native" way in DT to pass additional variables down into these handlers?

Currently no. You could perhaps wrap it up into an abstraction function, but that's probably the only way to make the code do what you are looking for at the moment.

@Shambla - Your suggestion looks good (in a hacky sort of way ;-) ). I think the DataTables API is going to need to add a method to get custom properties from the column configuration to make this more straight forward.

I've added that to my to do list for the next major version of DataTables - thanks for the suggestion!

Allan

glenderson

Yes, I mean to pass the HTML as part of the data array in the JSON response (or similar) mechanism.

scipilot

Ok Thanks @allen.

The feature I was really looking for was to be able to pass HTML views, or just a view name, like Moustache or shadow DOM nodes. i.e. the ability to inject or interface DT with common front-end templating engines. Then in the render function I'd be able to hook back to the existing templating system I'm already using and not have to change the pool of views.

I guess if you allow pass-any-additional-data, this will make it possible, but I thought I'd mention the specific need I encountered, in case you wanted to provide a more specific feature.

@glenderson I see. I cannot do that as my backend which generates the JSON doesn't know about HTML - in a MVC-ish pattern. This is why I'm having to intercept the JSON in the view processor and appending the metadata required during the DT render. It's a step I'd rather avoid, as it's adding imperative code to my view template.