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?

Answers

  • colincolin Posts: 15,240Questions: 1Answers: 2,599

    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

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

    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.

  • allanallan Posts: 63,498Questions: 1Answers: 10,471 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.

    Allan

This discussion has been closed.