Datatable- How to custom sort one column by different values every times from rendered html element

Question

Let's assume the cell of the Datatable are rendered like this:

      columnDefs: [
            {
                targets: 0,
                type: 'percent',
                render: function (data, type, full, meta) {
                    let html = '<span class="sort-value">' + data + '</span>';
                    html += "(<span class='sort-percent'>" + full.percent + "</span>%)";
                    return html;
                }
            }
      }

• At this time, by clicking on the header, I want to sort in the ASC direction for the first sorting using the value with the sort-value class name of the rendered HTML element.

• The second sort is the same, but the DESC direction by the value with the sort-value class name.

• For the third sort, I want to sort in the ASC direction by the value with the sort-percent class name.

• For the fourth sort, I want to sort in the DESC direction by the value with the sort-percent class name.

Then I want to repeat this sequence over and over again.

So, when sorting for the fourth time, it should be like this:

So I created the logic for this and introduced the following two variables:

var previously_sorted_index = 0;
var sort_state = 0;         // 0: default, 1: sort-value ASC, 2: sort-value DESC, 3: percentage ASC, 4: percentage DESC

And whenever the header is clicked and sort is performed, the sort_state value is updated and this works well. For better understanding, here is my code:

$('#table thead th').on('click', function() {
    var colIdx = $(this).index();

    if(previously_sorted_index == colIdx) {
        sort_state ++;
        if(sort_state == 5)
            sort_state = 1;
    } else {
        previously_sorted_index = colIdx;
        sort_state = 1;
    }
});

The problem is that I customized the sort using datatable's sort plugin, but it doesn't work as expected.

It simply performs a string sort using the HTML elements of the cell.

Here is my custom code

$.extend($.fn.dataTableExt.oSort, {
        "percent-pre": function (a) {
            let div = document.createElement('div');
            div.innerHTML = a;
            let sort_val_el = div.getElementsByClassName("sort-value");
            let sort_percent_el = div.getElementsByClassName("sort-percent");

            let sort_val = parseFloat(sort_val_el.length > 0 ? sort_val_el[0].innerHTML : 0);
            let percentage_val = parseFloat(sort_percent_el.length > 0 ? sort_percent_el[0].innerHTML : 0);

            return [sort_val, percentage_val];
        },
      
        "percent-asc": function (a, b) {
            if(sort_state == 1) {
                return a[0] > b[0] ? 1 : -1;
            } else if(sort_state == 3) {                        // percentage ASC/DESC
                return a[1] > b[1] ? 1 : -1;
            }
            return 0;
        },
      
        "percent-desc": function (a, b) {
            if (sort_state == 2) {                              // sort-value ASC/DESC
                return b[0] > a[0] ? 1 : -1;
            } else if(sort_state == 4) {                        // percentage ASC/DESC
                return b[1] > a[1] ? 1: -1;
            }
            return 0;
        }
    });

I debugged it, and the value of sort_state is updated exactly as expected.

When percent-pre returns a single value rather than an array as in my code (for example, only the percent value), the sort works exactly based on that value.

If return an array and sorting by the value of any element of the array according to the sort_state value does not work.

Is there something wrong with my code?

Thank you!

Answer 1

As @andrewJames mentioned, Datatable v1.x do not provide -asc, -desc option with custom sort plugin.

So I was updated Datatable to v2.0 and it provides the above two options, but there is a state in which sorting is not performed (state 0 - default order), so pressing sort in continuously then it will sort as ASC, DESC, after then Default (un-sorted) state. Then, on the 4th sort, it becomes ASC again, so in this case, one cycle is 6 times. I couldn't use the sort function of v2.0 because I wanted one cycle to be 4 times.

There may also be a function to remove the default state. And in default (unsorted state), we will have to forcefully draw a sort arrow direction to have 4 sort cycles...

I solved this problem with v1.x as follows:

There is orderDataType: option in Datatable Column defines.

     columnDefs: [
            {
                targets: 1,
                type: 'percent',
                render: function (data, type, full, meta) {
                    let html = '<span class="sort-value">' + data + '</span>';
                    html += "(<span class='sort-percent'>" + full.percent + "</span>%)");
                    return html;
                },
                orderDataType: 'custom-sort'
            },
            ....
      ]

When clicking on the table header, the value is updated to have 4 times cycle.

    var previously_sorted_index = 0;
    var sort_state = 0;                 // 0: default, 1: sort-value ASC, 2: sort-value DESC, 3: percentage ASC, 4: percentage DESC

    $('#table thead th').on('click', function() {
        var colIdx = $(this).index();
        
        if(previously_sorted_index == colIdx) {
            sort_state ++;
            if(sort_state == 5)
                sort_state = 0;
        } else {
            previously_sorted_index = colIdx;
            sort_state = 1;
        }
    });

Customize the sort function using the order plugin.

    $.fn.dataTable.ext.order['custom-sort'] = function(settings, colIdx) {
        return this.api().column(colIdx, {order: 'index'}).nodes().map(function(td, i) {
            let sortValue = $(td).find('.sort-value').text();
            let sortPercent = $(td).find('.sort-percent').text();
            if (sort_state % 4 < 2) {
                // First two sorts use sort-value
                return parseFloat(sortValue) || 0;
            } else {
                // Next two sorts use sort-percent
                return parseFloat(sortPercent) || 0;
            }
        });
    };

The important thing here is that type: 'percent' if this option is removed, the custom-order function will not work.