Row grouping on rendered column

Rawland_Hustle

Hi!

I'm using rendered data for a column and I want to group the rows based on it. Is that possible?

Thanks!

columns: [
{data: "namespace",
render: function ( data, type, row, meta ) {
split_array = data.split(':')
ans = split_array.splice(-2).join(':')
cut_off_part = split_array.join(':')
return cut_off_part;
}
},
.......
]

kthorngren

There is a comment at the bottom of the rowGroup.dataSrc that shows using a function. You can use a function similar to what you have in columns.render to create the rowGroups. Make sure you are sorting by this column.

Kevin

Rawland_Hustle

Worked like a charm! Thank you very much!

Rawland_Hustle

Acually, I can't get the sorting to work. How would I set the sorting in this case?

kthorngren

Use the order option to set the default table order. If you still need help please provide a simple test case with an example of your data showing the issues you are having.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

I built this simple example of manipulating the Position string with rowGroup and sorting.
http://live.datatables.net/yoyicasu/1/edit

Kevin

Rawland_Hustle

The order option does not work. See link below. Click a row in the first table to load the second table, where the grouping/sorting is.

http://themeadow.se/takdata/

Here's the function that creates the second table:

serviceContractsTable = $('#serviceContractsTable').DataTable( {
        data: data,
        dataSrc: "",
        order: [4, 'asc'],
        columns: [
                { data: "id"},
                {
                    data: "namespace",
                    render: function ( data, type, row, meta ) {

                        split_array = data.split(':')
                        ans = split_array.splice(-2).join(':')

                        var trimmeddata = ans.substring(0, ans.length - 11);
                        return trimmeddata;
                    }
                },
                { data: "major" },
                { data: "minor" },
                { data: null, visible: false},
                {
                    data: "name",
                    render: function(data, type, row, meta) {

                        return '<i class="fas fa-info-circle" style="color: Dodgerblue;" data-bs-toggle="popover" data-bs-placement="top" title="About" data-bs-content="' + data + '"></i>';

                    }
                }

        ],
        select: {
            style: "single",
            selector: "td:not(:last-child)"
            },
        pageLength: 25,
        rowGroup: {
            dataSrc: function(row) {
                data = row.namespace;
                split_array = data.split(':');
                ans = split_array.splice(-2).join(':');

                cut_off_part = split_array.join(':');

                return cut_off_part;
            }
        }

kthorngren

The page doesn't completely load for me:

You have order: [4, 'asc'],. The order docs show that an array of arrays is required. You will need order: [ [4, 'asc'] ],. Column 4 is { data: null, visible: false}, which doesn't have any data to sort. You will need to sort by the rowGroup.dataSrc column which is namespace. Try order: [ [1, 'asc'] ],.

Kevin

Rawland_Hustle

What does dev tools tell you about the problem with connectionPoints?

I actually "fixed" the array of arrays before posting the code here because I thought it was a typo on my part. Turns out it actually was supposed to be an array of array so I've changed back.

order: [ [1, 'asc'] ] sorts the table on name so that did not help.

kthorngren

There is no error. It times out the XHR request.

Ca you build a simple test case with an example of your data so we can see how columns.render is affecting the sorting of the namespace column?
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

Rawland_Hustle

What happens if you try to open the following url in your browser? Maybe the API has blocked traffic from international clients.

http://api.ntjp.se/coop/api/v1/connectionPoints

I'm afraid I can't build a test case because the API is served on http, not https. JSFiddle and similar services are using https.

kthorngren

The api link doesn't seem to work either.

Use the browser's network inspector to get a sample of the json data. Load it using a Javascript data source like this example. Provide your columns.render code. This way we can see the original data and help determine why its not sorting.

Kevin

Rawland_Hustle

Before I do that, is it possible to create the row grouping in any other way than this? Maybe I can change the way I'm doing the row grouping.

function processServiceContracts(data) {

    $("#serviceContractsWrapper").show();

    serviceContractsTable = $('#serviceContractsTable').DataTable( {
        data: data,
        dataSrc: "",
        order: [[4, 'asc']],
        columns: [
                { data: "id"},
                {
                    data: "namespace",
                    render: function ( data, type, row, meta ) {

                        split_array = data.split(':')
                        ans = split_array.splice(-2).join(':')

                        var trimmeddata = ans.substring(0, ans.length - 11);
                        return trimmeddata;
                    }
                },
                { data: "major" },
                { data: "minor" },
                { data: null, visible: false},
                {
                    data: "name",
                    render: function(data, type, row, meta) {

                        return '<i class="fas fa-info-circle" style="color: Dodgerblue;" data-bs-toggle="popover" data-bs-placement="top" title="About" data-bs-content="' + data + '"></i>';

                    }
                }

        ],
        select: {
            style: "single",
            selector: "td:not(:last-child)"
            },
        pageLength: 25,
        rowGroup: {
            dataSrc: function(row) {
                data = row.namespace;
                split_array = data.split(':');
                ans = split_array.splice(-2).join(':');

                cut_off_part = split_array.join(':');

                return cut_off_part;
            }
        }
    } );

    serviceContractsTable.off( 'select').on( 'select', function () {


        if (serviceProducersTable instanceof $.fn.dataTable.Api) {
            serviceProducersTable.destroy();
        }


        selectedServiceContract = serviceContractsTable.rows( { selected: true } ).data()[0].id;

        getServiceProducers();

    } );

    // Make info icons Boostrap 5 popovers
    var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
    var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
        return new bootstrap.Popover(popoverTriggerEl);
    });

}

Rawland_Hustle

Lol, I just fixed it by changing { data: null, visible: false} to { data: 'namespace', visible: false}. Thanks for your help!

kthorngren

An alternative is to use Orthogonal data. You could return the string manipulation for the display operation and the column data for the others, like this:

                {
                    data: "namespace",
                    render: function ( data, type, row, meta ) {
                      if (type === 'display) { 
                        split_array = data.split(':')
                        ans = split_array.splice(-2).join(':')
 
                        var trimmeddata = ans.substring(0, ans.length - 11);
                        return trimmeddata;
                     }
                     return data;
                    }
                },

Kevin