Adding data-order to dynamically loaded content

Adding data-order to dynamically loaded content

kiwiskiwis Posts: 15Questions: 10Answers: 0

I'm adding new rows to my datatable va rows.add() while looping through a JSON array.

One of the columns is "firstname lastname" as a full string but I want to sort by lastname only. Hence using the data-order option.

Is it possible to add this in somehow?


  • colincolin Posts: 12,939Questions: 0Answers: 2,204

    You can use orthogonal data for that. In columns.render, you can return a different value for the ordering. If you're using HTML5 tags, like data-order, that should happen automatically, see example here:


  • kiwiskiwis Posts: 15Questions: 10Answers: 0
    edited April 14

    Here's what I have. My two date columns sort perfectly. My first name column doesn't.

            paging: false,
            "searching": false,
            "autoWidth": false,
            columnDefs: [
                    targets: [0,7,8],
                    data: {
                        _: "0.display",
                        sort: "0.@data-order",
                        type: "0.@data-order"

    On a click even I'm loading content via fetch and row.add

    fetch('getmyContent.php').then(function(response) {
                return response.json().then(function(data) {
                    for(var i = 0; i < data.length; i++) {
                        var obj = data[i];
                        var rowHtml = $('#refRow').html()
                            .replace('{{Surname}}', obj.Surname)
                            .replace('{{personName}}', obj.personName)
                            .replace('{{MinTime}}', obj.MinTime)
                            .replace('{{First}}', obj.MinTimeF)
                            .replace('{{MaxTime}}', obj.MaxTime)
                            .replace('{{Last}}', obj.MaxTimeF)

    Finally my template

    <script id="refRow" type="text/html">
            <td data-order="{{Surname}}">{{personName}}</td>
            <td data-order="{{MinTime}}">{{First}}</td>
            <td data-order="{{MaxTime}}">{{Last}}</td>

    I'm removed other columns but 7 & 8 need sorting like the first (0).

    Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

  • allanallan Posts: 54,909Questions: 1Answers: 8,606 Site admin

    Can you link to a test case showing the issue (as noted in the forum rules), so we can offer some help. 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.


Sign In or Register to comment.