Render Text-Helper not showing HTML?

Mik_rater

Hello again community!

I am trying to render my DataTables table so that it allows HTML characters to be shown.
From my reading it seems that this can be done using the DataTables Text Helper (as seen here https://datatables.net/manual/data/renderers)

As in the example they give they simply put:

data: 'product',
render: $.fn.dataTable.render.text()

However when I have tried this it appears to do nothing?
As all the columns in my DataTable still don't show any HTML special characters (and no errors). Is there something simple I am missing?

Here is a Datatables Live Example (note in the HTML, I have thrown in a <span> that does not get shown)
http://live.datatables.net/pafadimu/2/edit

I am clearly missing something obvious here, so any help at all would be appreciated!

Thank you for any assistance!

colin

The <span> has no effect as it's just used for grouping. I see you've also added <b> to a call, and that's having a visual effect as expected. I'm not clear what you're trying to do, could you modify the example so that it demonstrates the issue, please.

Colin

Mik_rater

Hi Colin,

Sorry, I wasn't clear on what I meant!
But what I want to do, is I want to be able to see those HTML elements, as in I want the table on the right to show;
"Tiger <span> Nixon" or "Ashton<b> Cox"
As the data my users are entering involves strings that could contain characters that are technically HTML.

From what I read, I was under the assumption that is what
"$.fn.dataTable.render.text()" did.

Am I on the right track, or nowhere close?

Thank you!

kthorngren

You have:

  var table = $('#example').DataTable({
     render: $.fn.dataTable.render.text()
  }

Datatables doesn't have an option called render. There is a columns.render. You need to use either columns or columnDefs to to apply the render. Something like this:

    columnDefs: [
      {
        targets: 0,
        render: $.fn.dataTable.render.text()
      }
    ]

Your updated example:
http://live.datatables.net/pafadimu/3/edit

Kevin

Mik_rater

Thanks Kevin!

I feel so silly for not realising that render was a column option (as it says on that page), I think I just got my head around it the wrong way to begin with.

This seems like just what I was after!
Just a quick question regarding the data-tables live example, in the example it is turning the singular <b> tag int to tag with closing tag;

Ashton<b> Cox</b>,
Which is not what I was after, but when I added this into my own code, its seems to do what I want:
Ashton<b> Cox

Is this due to some option, or could it just be related to the way i've configured my data-table?

Again, this information is a massive help, so many thanks!

kthorngren

I think the browser adding the closing tags. This example shows a <span> without the closing tag but inspecting it shows the </span>.

This is outside of Datatables. You can also see in the example that I manually escape the HTML with replace statements and the same thing happens. I've never seen a case where Datatables modifies the data on its own. This is something you have to code.

Kevin

allan

Agreed! If you were to Ajax load the data, it wouldn't hit the DOM before being read into DataTables and thus wouldn't be "corrected" by the browser. But if you are DOM sourcing the data, the browser will render (and correct) it first.

Allan

Mik_rater

Ah that information is perfect!
I will implement this across my data-tables code, we are using Ajax to load in our data, so this should all work well for us.

Thanks for all of the assistance, this will be a big help!
Mike