Is it possible to style text as an icon?

andrew2311

I have a DataTables table that is populated via AJAX/JSON, something like this:

[code]$('#runtable').dataTable({
"aaSorting": [[ 1, "asc" ]],
"bSort": true,
"bFilter": true,
"bStateSave": true,
"bProcessing": true,
"sScrollY": "200px",
"bPaginate": false,
"sAjaxSource": '../RunDataServlet'
});[/code]

The JSON data looks like this:

[code]"aaData": [
[
"20111117_115348",
"false",
"true"
],
[
"20111117_095034",
"false"
"false"
],
[
"20111116_160527",
"false"
"true"
],[/code]

So we have an ID Number then we have two further columns containing either 'true' or 'false'.

What I would quite like to do is translate these 'true' or 'false' values to an icon, so it might translate something like this:

[code]true =
false = [/code]

My first solution was to just change the JSON so it embeds the code, but I would quite like to use filtering in my table and this does not fit well with putting HTML in the data.

Is this possible with data tables?

Any help greatly appreciated!

fbas

fnRender lets you convert your cell value

in aoColumns or aoColumnDefs, set an fnRender routine

[code]
$('#runtable').dataTable({
"aaSorting": [[ 1, "asc" ]],
"bSort": true,
"bFilter": true,
"bStateSave": true,
"bProcessing": true,
"sScrollY": "200px",
"bPaginate": false,
"sAjaxSource": '../RunDataServlet',
"aoColumnDefs": [
{
"aTargets": [1, 2],
"bUseRendered": false,
"fnRender": function(oObj) {
if (oObj.aData[oObj.iDataColumn].toLowerCase() == "true") return ""
if (oObj.aData[oObj.iDataColumn].toLowerCase() == "false") return ""
}
}
]
});
[/code]

fbas

you may want to include "bUseRendered: false" or "sType: string" in the aoColumnDefs if you want those columns to be sorted

the first one tells DataTables to use the unrendered value for filter/sort - for your project this is probably better.

the second one tells DataTables to sort the column as a string no matter what (by default it will try to detect the type and will probably use 'html' - if so it will strip the html and end up with an empty string and all your column values will be the same hence not sort)

andrew2311

Wonderful, thankyou for the help! One slight slight slight typo: the ; after "bUseRendered" should be a : (my eye sight must be bad, took me ages to pick that up!)

fbas

Thanks for catching that. I edited it for future visitors.