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