Sorting

In overview and detail pages of the standard HTML report, the entities of level 1 and level 2 can be sorted by coverage ratio and by missing hits. The corresponding HTML patterns and JavaScript functions can be reused, for example to add another sorting criterium.

Sorting is performed on two levels: For a sorting container, its HTML children are sorted. For each of these children, its descendants are sorted.

The file Sorting.js is used for sorting, allowing to sort by any integer values. To set it into effect, you need the following elements in HTML:

An element of class SortingTrigger. For these elements, the two-level sorting is registered by Sorting.js.
A sorting container element with ID whose descendants shall be sorted. Reference to the ID in attribute data-sorting-container-id of the sorting trigger.
An attribute data-sorting-attribute, with the name of the sorting criterium. In elements to be sorted, this sorting criterium must be provided as a custom data-* attribute, filled with the value of the criterium per element.
The initial sorting direction provided in attribute data-sorting-direction. Possible values: none, ascending, descending.

For the sorting container, the elements to be sorted are prepared in the following way:

For each element, provide its value of the sorting criterium in custom attribute data- followed by the name referenced in data-sorting-attribute of the sorting trigger.
Mark children to be sorted with class SortMe. With that feature, elements like captions or subtotals can be excluded from sorting.
Mark elements with children to be sorted with class SortMyChildren. They can be identical to the SortMe elements of first level, but this is not necessary.

Simplified example

To focus on the relevant aspects of sorting, template variables are not used in this example. You can copy this code in an HTML file, put Sorting.js from the standard template in the same folder, and it should work.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="Sorting.js"></script>
    <title>Sorting Example</title>
</head>
<body>
    <h1>Sorting Example</h1>
    <button type="button"
            class="SortingTrigger" 
            data-sorting-container-id="MySortingContainer" 
            data-sorting-attribute="my-value" 
            data-sorting-direction="none">
            Try Sorting
    </button>
    <ul id="MySortingContainer">
        <li class="SortMe SortMyChildren" data-my-value="42">
            <p>PARENT, 42</p>
            <p class="SortMe" data-my-value="30">Child, 30</p>
            <p class="SortMe" data-my-value="10">Child, 10</p>
            <p class="SortMe" data-my-value="20">Child, 20</p>
        </li>
        <li class="SortMe SortMyChildren" data-my-value="99">
            <p>PARENT, 99</p>
            <p class="SortMe" data-my-value="829">Child, 829</p>
            <p class="SortMe" data-my-value="11">Child, 11</p>
        </li>
        <li class="SortMe SortMyChildren" data-my-value="666">
            <p>PARENT, 666</p>
            <p class="SortMe" data-my-value="3">Child, 3</p>
            <p class="SortMe" data-my-value="1">Child, 1</p>
            <p>-- I stay in the middle of parent 666 --</p>
            <p class="SortMe" data-my-value="2">Child, 2</p>
            <p class="SortMe" data-my-value="4">Child, 4</p>
        </li>
        <li class="SortMe SortMyChildren" data-my-value="1">
            <p>PARENT, 1</p>
            <p class="SortMe" data-my-value="5">Child, 5</p>
            <p class="SortMe" data-my-value="13">Child, 13</p>
        </li>
    </ul>
</body>
</html>