Home/ Questions/Q 7575459
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T16:41:42+00:00

I have a multiple html tables on a page which each have a header

  • 0

I have a multiple html tables on a page which each have a header row. When I click that column header it should sort all tables by that column. The column that I am specifically referring to contains an anchor which for text displays a integer value.

When I click the column header I am experience an incorrect sort. Assume I have the following on this screen load:

83
84
104

Now I click the column header the end result becomes:

104
83
84

I have the code written to alternate the sort on the next click and what happens is that the 104 and 84 pivot around the 83. What I believe is happening is that it is comparing these incorrectly. I have tested it with larger data sets and the problem comes up when any of the numbers do not share a common number of digits.

Is there anything (maybe a flag I’m missing?) to tell this thing to sort it correctly? All of my more string-like data sorts correctly.

Code:

<html>
<head>
    <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="jquery.tinysort.min.js"></script>
    <script language="javascript">
    var aAsc = [];
    $(".SubHead").click(
        function() {
            var nr = $(this).index();
            aAsc[nr] = aAsc[nr]=='asc'?'desc':'asc';
            $('.resultTable>tbody>tr:not(.SubHeadRow)').tsort("td:eq("+nr+")",{order:aAsc[nr]});
       }
   );
    </script>
</head>
<body>
    <table class="resultTable" border="1">
        <tr class="SubHeadRow">
            <td class="SubHead">
                <a href="#">ID</a>
            </td>
            <td class="SubHead">
                <a href="#">Application Header</a>
            </td>
            <td class="SubHead">
                <a href="#">Version Header</a>
            </td>
        </tr>
        .
        .
        .
    </table>
    .
    .
    .
</body>

Edit:
This is the link for the plugin: http://tinysort.sjeiti.com/

Above I ammended the code to include a sample of what the html looks like. I’m not infront of it so it may not be 100%. Not that I suspect it is important but the tables are dynamically created in ColdFusion 7MX.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Ok,

    I answered my own question. Reviewing the TinySort site this morning I noticed an area dedicated to this. After spending hours focusing on this feature it’s easy to see how it was overlooked. The answer is at http://tinysort.sjeiti.com/ under parsing a custom sort function with some minor tweaking.

    I created a custom case for the integer column and passed a custom comparator function. See below: 

    var aAsc = [];
$(".SubHead").click(
    function() {
        var nr = $(this).index();
        aAsc[nr] = aAsc[nr]=='desc'?'asc':'desc';
        if(nr == 0){
            $('.resultTable>tbody>tr:not(.SubHeadRow)').tsort("td:eq("+nr+")", 
                {
                    sortFunction:function(a,b) {
                        var order = (aAsc[nr]=='asc')?1:-1;
                        var i = parseInt(a.s);
                        var j = parseInt(b.s);
                        if( i===j ){
                            return 0;
                        } else {
                            return (i > j)?order:-1*order;
                        }
                    }
                }
            );
        } else {
            $('.resultTable>tbody>tr:not(.SubHeadRow)').tsort("td:eq("+nr+")",{order:aAsc[nr]});
        }
    }
);
    • 0