Auto sort the table using sorttable.js

Question

I am trying to use this script to sort the html table: http://www.kryogenix.org/code/browser/sorttable/

JS code itself: http://www.kryogenix.org/code/browser/sorttable/sorttable.js

I used the customkey option and it works when I click the heading. I would like to auto sort based on that customkey when the page loads. How can I do that? I want to use this specific script. I tried window.onload but with no luck.

Answer 1

After loading the page just trigger a click on the header column you want to sort. Try with following javascript code. I assume that there is only one table in the page. Perhaps you will need to be more specific using getElementsByTagName or with getElementById instead. The [1] is the column number. You don't need to attach a click handler before that because that task is done by the code of sorttable.js.

<script src="js/sorttable.js"></script>
<script>
    window.onload = function() {
        (document.getElementsByTagName( 'th' )[1]).click();
    };
</script>

Answer 2

I solved this problem slightly different. On whatever table header I wanted clicked on the page load, I added data-autoclick="true". Then in my main application JavaScript, I added

<script>
    window.onload = function() {
        $('[data-autoclick="true"]').click();
    };
</script>

Answer 3

How to use

table.sortable th:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(.sorttable_nosort):after { 
        content: " \25B4\25BE" 
    }

in dynamic table.