Adding data-order to dynamically loaded content

kiwis

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?

colin

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: https://datatables.net/examples/advanced_init/html5-data-attributes.html

Colin

kiwis

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

 $('#myTable').DataTable({
        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)
                   
                    t.row.add($(rowHtml)).draw();

                }
            });
        });

Finally my template

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

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.

allan

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.

Allan