BlackFade.comRob Taylor – Web Developer, UK

Morning all, I’ve recently started working for the BBC, and as such I’ve started working with the internal JavaScript framework, Glow.

So this is my first attempt at writing to some code with it. I hope it’s useful to someone. It’s just a simple JavaScript table sort.

The Introduction

Just a bit of useful script for client side sorting of tables. Simple click the headers of the columns, and it will arrange it in ascending order. A second click will arrange it in descending order.

As Seen On…

BBC News Common-Wealth Games Medals Table : In English, In Urdu, In Hindi, and on BBC Worldwide

UPDATE – 30th July 2010: After talking with a BBC colleague, it occurred to me that I could improve the code, so that it doesn’t rely on the class names for the ordering. The class names are now purely for decoration, not functionality.

UPDATE 2 – 30th July 2010: It was just pointed out by James (thanks man), that Glow/JS doesn’t handle number sorting brilliantly, so I’ve added a small patch to improve this. Thanks to James for his suggestion.

UPDATE 3 – 3rd August 2010: Some alterations to improve sorting of floats.

The Demo

The Source Code

JavaScript

gloader.load( [ 'glow', '1', 'glow.dom', 'glow.events' ], {
        async: true,
        onLoad: function( glow ) {
                var getPosition = function( heystack, needle )
                {
                        var position = 0;
                        heystack.each( function( i ){
                                if( needle.eq( this ) )
                                        position = i;
                        });
                        return position;
                }
                var sortDir = 0;
                var sortBy_store;
                glow.events.addListener( '#myTable thead tr th' , 'click', function ( event ) {

                        var sortBy      = getPosition( glow.dom.get('#myTable thead tr th'), glow.dom.get( this ) );

                        if( sortBy == sortBy_store )
                                sortDir = ( sortDir ? 0 : 1 );
                        else
                                sortDir = 0;

                        sortBy_store    = sortBy;

                        glow.dom.get( '#myTable tbody tr' ).remove().sort( function( rowA, rowB ) {
                                var sortArr = new Array( 1, -1 );
                                if( sortDir )
                                        sortArr = new Array( -1, 1 );

                                var rowA_obj = glow.dom.get( rowA ).get('td');
                                var sortA = glow.dom.get( rowA_obj[sortBy] ).text();

                                var rowB_obj = glow.dom.get( rowB ).get('td');
                                var sortB = glow.dom.get( rowB_obj[sortBy] ).text();

                                if( !isNaN( sortA ) )
                                        sortA = parseFloat( sortA )
                                if( !isNaN( sortB ) )
                                        sortB = parseFloat( sortB )

                                return sortA > sortB ? sortArr[0] : sortArr[1];

                        }).appendTo( '#myTable tbody' );

                });
        }
});

HTML

<table id='myTable'>
	<thead>
		<tr>
			<th class='col1'>Number</th>
			<th class='col2'>Male Names</th>
			<th class='col3'>Female Names</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td class='col1'>3</td>
			<td class='col2'>James</td>
			<td class='col3'>Helen</td>
		</tr>
		<tr>
			<td class='col1'>2</td>
			<td class='col2'>Thomas</td>
			<td class='col3'>Laura</td>
		</tr>
		<tr>
			<td class='col1'>4</td>
			<td class='col2'>Steven</td>
			<td class='col3'>Catherin</td>
		</tr>
		<tr>
			<td class='col1'>1</td>
			<td class='col2'>Simon</td>
			<td class='col3'>Samantha</td>
		</tr>
	</tbody>
</table>