Html code in table header row not being displayed

Html code in table header row not being displayed

TamaraMTamaraM Posts: 5Questions: 1Answers: 0

I'm having troubles displaying a html code in a table header row. Here is the JSON that I get from the server:
Table header:
tblHeader = [{"title":"A&E"},
{"title":"<span data-i18n=\"viewHeader.lastUpdate\">letzte Änderung</span>"},
{"title":"<span data-i18n=\"viewHeader.lotNumber\">Los-Nr.</span>"},
{"title":"<span data-i18n=\"viewHeader.creatingPA\">erfassender Prozessbereich</span>"},
{"title":"<span data-i18n=\"viewHeader.causingPA\">verursachender Prozessbereich</span>"},
{"title":"<span data-i18n=\"viewHeader.creatingOperation\">Erfassende Operation</span>"},
{"title":"<span data-i18n=\"viewHeader.unit\">Anlage</span>"},
{"title":"<span data-i18n=\"viewHeader.errorCode\">Fehlercode</span>"},
{"title":"<span data-i18n=\"viewHeader.dateTime\">erf. Datum/Zeit</span>"},
{"title":"<span data-i18n=\"viewHeader.docStatus\">Dokument Status</span>"}]

tbl.DataTable({
columns: tblHeader,
data: tblBody //displayed correctly, ignore this
});
But <span> elements are not being displayed, only the text inside it. Any help would be appreciated.

This question has an accepted answers - jump to answer

Answers

  • TamaraMTamaraM Posts: 5Questions: 1Answers: 0

    Just to make it clear what I mean :) <span> is not inside <th> element, just the text from it.

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    Hi @TamaraM ,

    We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

    Cheers,

    Colin

  • TamaraMTamaraM Posts: 5Questions: 1Answers: 0

    Hi @colin,

    Thank you for your response. Unfortunately it is not easy to create a test case, because the project is very specific and used in intergration with Lotus Notes :/ What is weird is that for example an <a> tag is rendered correctly in the table body, but <span> or any other html element is not rendered at all in the header. Just the text is used. Is there anything I need to configure in general when initializing the DataTable so that it renders html code in header row?

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    edited July 2019 Answer ✓

    I created a test case for you:
    http://live.datatables.net/yuqeriqo/1/edit

    When I inspect the header I see this:

    <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="letzte Änderung: activate to sort column ascending" style="width: 155px;"><span data-i18n="viewHeader.lastUpdate">letzte Änderung</span></th>

    Maybe I'm missing something but it seems to work in the test case. Is this what you are expecting? If this si correct, then please update the test case to replicate your issue.

    Kevin

  • TamaraMTamaraM Posts: 5Questions: 1Answers: 0

    Hi @kthorngren,

    thanks a lot for your reply and test case. You helped me to realize what the problem is. I have a column filter in header for each column and that always removes the <span> element. But my initial problem is solved. Thank you!

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    My suggestion is to use two headers; one for the column search and the other for the titles and sorting. Something like this example:
    http://live.datatables.net/cedayopa/1/edit

    Note the use of orderCellsTop to tell Datatables which row contains the sorting function.

    Kevin

  • TamaraMTamaraM Posts: 5Questions: 1Answers: 0

    Thanks @kthorngren! I've got it working with one header too.

This discussion has been closed.