Is there a way of displaying a "sorted by" summary in the "info" feature?

dbunge

Currently, this is on an intranet site so I cannot show an example.

When I click on the columns to sort, the arrows highlighted as expected, but if I shift-click and add a secondary sort, it's not apparent how the table is being sorted since it's sorted by one column and then a secondary column.

So, I'm wondering if there is a plugin or other option which would show more verbose details about the sorting.

Thank you

kthorngren

I would look at using infoCallback for this. In the callback use order() to get the current ordering.

Kevin

allan

It's a cool idea for a plugin that. You could listen for the info event and modify the info there.

Another option, if you want a more visual representation of the applied sort is to use the plugin presented here.

Allan

allan

Its good practice for me to try little plugins now and then, so here is one which adds the column name to the info element: https://live.datatables.net/xatimufo/1/edit .

You just need to add infoOrder to the initialisation options.

Things to add: details about ordering direction, and support for multiple column ordering.

Allan

dbunge

I had to make some tweaks, as mentioned, but I now have a "Ordered by" working.

$(document).on('preInit.dt', (e, ctx) => {
    let api = new DataTable.Api(ctx);
    let opts = api.init();

    if (opts.infoOrder) {
        api.on('info', (eInfo, eCtx, el) => {
            let order = api.order();

            if (!order.length) {
                return;
            }

            let orderDir = order[0][1];
            if (orderDir != '') {
                let span = document.createElement('span');
                span.classList.add('dt-info-order');
                span.textContent = 'Ordered by: ';
                for (var x = 0; x < order.length; x++) {
                    let orderCol = api.column(order[x][0]);
                    let orderDir = order[x][1];
                    span.textContent += orderCol.title() + ' ' + orderDir + ',';
                }
                //cleanup end of text so no trailing space or comma
                span.textContent = span.textContent.trim();
                span.textContent = span.textContent.replace(/,+$/, '');
                el.append(span);
            }
        });
    }
});

allan

Good stuff! Here is my example updated with your plugin code.

Thanks for sharing that with us.

Allan