Problem with tags when using external dataset and data-render, using datatables

Question

I have a project, where I use DataTables and yadcf. Until now I have used PHP to populate the table when generating the DOM. Now I want to use AJAX to poulate the table, which works fine, except that it breaks the yadcf "tags" functionality. If I want it to work, I need to send the complete HTML formatted tags list through AJAX. I would like it to work just sending the tags as an array, and use the "render" function in DataTables, to convert them to individual DOM elements.

I have tried to use both "html" and "rendered_html" in "column_data_type" in yadcf, but nothing does the trick.

var dataset = [{"name":"B. Gates", "tags":["js", "css", "asp"]},{"name":"S. Jobs", "tags":["js", "css", "php"]}];

var table = $('table').DataTable({
    data: dataset,
    columns: [
        {"data": "name"},
        {
            "data": "tags",
            "render": function(data, row, type){
                var tags = '';
                for (i=0; i<data.length; i++)
                {
                    tags += '<span class="badge badge-secondary">' + data[i] + '</span>&nbsp;';
                }
                return tags;
            }
        }
    ]
});

yadcf.init(table, [
    {
        column_number : 1,
        column_data_type: "rendered_html", //html
        html_data_type: "text",
        filter_default_label: "Select tag"
    }
]);

I have made a fiddle example here: https://jsfiddle.net/majbom/3d4npzsr/1/

When using "html" in "column_data_type", the tags list remains empty after populating the table. When I use "rendered_html", I get a list with all represented combinations of the tags in the table. What I want, is a list of all the individual represented tags in the table.

Thanks in advance :)

Answer 1

You should use text_data_delimiter: String.fromCharCode(160) in yadcf init for that column, the reason for using String.fromCharCode(160) is because somehow the   is being used as separator in the string (instead of normal space

Like this

yadcf.init(table, [
    {
    column_number : 1,
    column_data_type: "rendered_html", //html
    html_data_type: "text",
    filter_default_label: "Select tag",
    text_data_delimiter: String.fromCharCode(160)
  }
]);

https://jsfiddle.net/wcbkzxnt/1/