Dynamic (AJAX sourced) advanced functions

Dynamic (AJAX sourced) advanced functions

customstockalertscustomstockalerts Posts: 6Questions: 2Answers: 0

I have most of my DT options brought back via JSON and I'm looking to do even more with that. As a quick example I have JSON that passes configuration options for columns, datatables itself as well as the data. I'm doing all of this to keep my front end logic fairly minimal if possible.

To aid this, I want to do more complex tasks like returning a function definition within JSON and running that. For example, I'd like to use a render function (https://datatables.net/manual/data/renderers) on the fly. I've used the ellipsis plugin before so that would be one example that I'd like to be able to pass it back and be recognized as JSON. Right now it throws the unrecognized parameter error. I tried passing a function back as JSON but that isn't picked up either.

I loosely know that JS allows a function to be created on the fly using something like new Function(JSON) so I'm wondering if that could be used to aid in what I'm trying to do. I've also tried defining the function in JS and trying to have the render option call it, such as column.render = testFormat(data,type,row) but no luck with that either.

Is there a way either with a combination of DT options or using the API that I can return a dynamic function and have DT recognize it? Has anyone ever done this?

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 61,663Questions: 1Answers: 10,095 Site admin
    Answer ✓

    I want to do more complex tasks like returning a function definition within JSON and running that

    That's not possible. While, yes, Javascript does support that, JSON does not. It is a sub-set derived from Javascript and quite specifically does not allow for functions to be defined.

    This is why DataTables column configuration isn't currently possible with DataTables' own columns configuration option.

    The only way you can really use to get around this (without compromising security) is to use $.ajax to make a call to the server to get the column definitions that you want to use, and it would give the function name to be used for the renderer as a string. Then in Javascript loop over the columns and convert the function name to an actual function - e.g. render: $.fn.dataTable.render[ column.renderer ]( ... ).

    Allan

  • customstockalertscustomstockalerts Posts: 6Questions: 2Answers: 0

    Ok cool thanks for that I'll give it a shot. I think you can see what I'm after, basically let me define everything on the server and have the front end be agnostic, just accept a JSON object that defines everything I want my table to do so that any tweaks can be done on the backend without deploying actual code.

  • allanallan Posts: 61,663Questions: 1Answers: 10,095 Site admin

    My current plan is to introduce the ability in v2 to have DataTables automatically lookup a rendering function by name if a specific prefix is used - for example render: '-text' would use the text renderer. How to pass parameters to it though is a little more tricky '-number( 2, 0 )' for example would require some parsing with regex.

    Allan

  • customstockalertscustomstockalerts Posts: 6Questions: 2Answers: 0

    Cool that worked as expected. So in my particular case, I'm iterating over my columns, I can check an attribute name or something else and for instance assign the JS ellipse renderer. Here's a quick example in case it helps anyone else:

    var columns = json.dataTable.columns;
    
    //Do my custom client side edits
    $(json.dataTable.columns).each(function(i, item) {
        if (item.title == 'Company Name') {
           columns[i].render = $.fn.dataTable.render.ellipsis(40);
        }
    });
    
    json.dataTable.columns = columns;
    
    $("#dataTable").dataTable(json.dataTable);
    
  • allanallan Posts: 61,663Questions: 1Answers: 10,095 Site admin

    Super - thanks for sharing that with us.

    Allan

This discussion has been closed.