elboffor elboffor - 6 months ago 16
jQuery Question

DataTables: alterning the output after the table has been built via json

I've recently made the transition from building my tables in HTML and using DataTables to redraw them to populating the data from JSON.

I'm struggling however to figure out how to make replacements to the data that's written to the dom.

example (not a real example lol):
I have a string in columnA which is a description that reads...


to use a quotation mark hold down shift and press 2, this will make
them appear, like so "


if I try and send that sentence in a JSON, the JSON will become invalid. The way I have gotten around this is by replacing ' " ' to ' quotation-mark ' at the point the JSON is created. This works fine and the JSON is valid but it means the sentence now reads...


to use a quotation mark hold down shift and press 2, this will make
them appear, like soquotation-mark


What I need ideally is the relevant syntax to alter what DataTables writes in the dom. The JSON also writes span elements with custom properties that may also include a quotation mark so I can't just alter the cell per-se.

My current code for writing the table is as follows:

$("#table9").DataTable({
"sScrollX": "90%",
"sScrollXInner": "100%",
"ajax": "Ajax.asp?RT=weeklyData",
"order": [[ 0, "desc" ]]
});


I could do a blanket search over the entire dom after the DataTable has been rendered and then replace the offending phrases but it seems very wasteful and inefficient.

Any input of a better resolve would be much apreciated

Thanks in advance folks

elboffor

Answer

Datatables offers a few options in this case. Checkout:

https://datatables.net/reference/option/columns.render https://datatables.net/reference/option/columns.createdCell

If I were you I'd probably use the createdCell option to manipulate the td element before its appended to the DOM.

$("#table9").DataTable({
    "sScrollX": "90%",
    "sScrollXInner": "100%",
    "ajax": "Ajax.asp?RT=weeklyData",
    "order": [[ 0, "desc" ]],
    "columnDefs": [ {
        "targets": 0,
        "createdCell": function(td, cellData, rowData, row, col){
            $(td).html($(td).html().replace(/quotation-mark/g,"quotation-mark-replacement"));
        }
    }]
});
Comments