Jira aui sortable table cannot sort priority correctly

Jira Development Jira Server
,
1

I am using an aui aui-table-sortable. It works except for sorting priorities.
Looking at the code I can only find flags for:
aui-table-column-issue-key
aui-table-column-unsortable

Is there a way to make this kind of table sort my priorities correctly instead of alphabetically?

2

@daz, can you help out @paul.korver?

3

Hi @paul.korver!

I don’t have a full working answer for you right now. I need to investigate how malleable AUI’s sortable tables solution is and get back to you.

What I know so far I’ve mentioned in another dev community answer: Under the hood, AUI uses a jQuery plugin called “tablesorter” to provide the sorting behaviour. Specifically, AUI uses v2.17.7 of Mottie’s fork of tablesorter.

According to the docs of the modded tablesorter plugin, you can add a new sorting strategy to the plugin by creating a new “parser”: jQuery tablesorter 2.0 - Writing custom parsers. It then appears that you can add a CSS class to your table header with the name of your parser, and the column will then be sorted using that instead of the default parser.

The bit I’m unsure about (hence why I don’t consider this a complete answer) is that I have not tested whether this works myself. The fact that AUI exposes some prefixed class names that have special behaviour makes me wonder about what’s going on under the hood… but I haven’t looked close enough. I’ll find some time to complete the answer tomorrow.

Hope that helps,
Daz

2 Likes
4

Hi @daz,

Thank you very much for the information so far.
Did you happen to have time to find a complete answer on this already?

Greetings,

Paul

5

Not yet, I’m afraid. I just flew back from Sydney to Gdansk. I’ve carved out a bit of my time tomorrow to spike and answer this question more thoroughly. I’ll report back tomorrow with my findings or lack thereof.

In the best case scenario, the behaviour will be achievable with the current implementation and restrictions AUI imposes. In the median case, it will need to be added to AUI. In the worst, AUI’s sortable table implementation will get in the way of achieving your goals. In any case, there’ll be some bug reports – one for improving the docs, one for improving the sortable table pluggability.

6

Hi @paul.korver,

I tested adding a custom parser to AUI’s sortable table, and it works according to that plugin’s documentation.

Here is an example table with priorities in it:

        <table id="custom-parser-example" class="aui aui-table-sortable">
            <thead>
            <tr>
                <th class="aui-table-column-issue-key">Issue key</th>
                <th class="sorter-priority">Priority</th>
                <th>Last updated</th>
                <th>Summary</th>
            <tr>
            </thead>
            <tbody>
            <tr>
                <td>TEST-12</td>
                <td>High</td>
                <td><time datetime="2017-04-20T14:00:00Z">April 20, 2017</time></td>
                <td>Table sorting should be allowed</td>
            </tr>
            <tr>
                <td>WIN-87</td>
                <td>Blocker</td>
                <td><time datetime="2018-04-23T11:30:00Z">April 23, 2018</time></td>
                <td>Issue Page doesn't load in IE</td>
            </tr>
            <tr>
                <td>DRINK-7</td>
                <td>Low</td>
                <td><time datetime="2018-04-01T17:30:00Z">April 1, 2018</time></td>
                <td>Vending Machine is empty</td>
            </tr>
            <tr>
                <td>TEST-7</td>
                <td>Medium</td>
                <td><time datetime="2018-01-11T09:30:00Z">January 11, 2018</time></td>
                <td>My hovercraft is full of eels</td>
            </tr>
            </tbody>
        </table>

Note the CSS class sorter-priority on the <th> element – this is important. This indicates that a custom parser with an id of priority should be used to sort the table.

Let’s create that parser:

(function() {
    var priorityMap = {
        'high': 3,
        'blocker': 5,
        'low': 1,
        'medium': 2
    };

    AJS.$.tablesorter.addParser({
        id: 'priority',
        is: function(nodeValue, table, cell) {
            return false;
        },
        format: function(nodeValue, table, cell) {
            var raw = (nodeValue || '').toLowerCase().trim();
            return priorityMap[raw] || -1;
        },
        type: 'numeric'
    });

    // Since we added a new sorter, but the table was added at page load,
    // we'll need to kick off the sorting again.
    AJS.$('#custom-parser-example').trigger('sort');
}());

Note that I have assigned numeric values to each priority; in this arrangement, “Medium” sorts above “Low”, which isn’t alphabetical order. This should do what you want.

So that others can discover this behaviour more readily, I will be adding this example to AUI’s documentation, along with a link to the version of the tablesorter plugin we’re using. Follow AUI-4755 for the status of that.

Cheers,
Daz

1 Like