jquery - date time and alphabet wise sort in html table using javascript -
hi new web page developer, need sort table in date wise , alphabet wise on click of table header
this table.... data's inside table generated dynamically using ajax....
my need is
- on click of date header should sort according date
- on click of notify header should sort according alphabet
please give ideas or suggestions .......
i made example using jquery library, , added in http://jsfiddle.net/burg4/2/
jquery selector returns array object, has native array sort function .
$('table tbody tr').sort( function( , b ) { // compare here }); hope helps ..
copy , paste following code file .. rename test.html
<html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> </head> <body> <table border="1"> <thead> <tr> <th data-key="id" data-column="0" data-order="asc">id</th> <th data-key="date" data-column="1" data-order="asc">date</th> <th data-key="notify" data-column="2" data-order="asc">notify</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>31-03-2013 06:12:57 pm</td> <td>gold</td> </tr> <tr> <td>2</td> <td>31-03-2013 06:14:57 pm</td> <td>diamond</td> </tr> <tr> <td>3</td> <td>31-03-2013 06:10:57 pm</td> <td>silver</td> </tr> </tbody> </table> <script type="text/javascript"> function getdate( str ) { var ar = /(\d{2})-(\d{2})-(\d{4}) (\d{2}):(\d{2}):(\d{2}) ([am|pm]+)/ .exec( str ) return new date( (+ar[3]), (+ar[2])-1, // careful, month starts @ 0! (+ar[1]), (+ar[4])+ ( ar[7]=='pm'? 12 :0 ), (+ar[5]), (+ar[6]) ); }; $( function(){ var sorter = { order : [1,-1], column : 0 , key :'id' , setorder : function( k ){ this.order = ({ asc :[1,-1], desc:[-1,1] })[k] || this.order ; return this; }, setcolumn : function( c ){ this.column = c || this.column ; return this; }, setkey : function( k ) { this.key = k || this.key; return this; }, sort : function( els ) { var sortfunc = this.key; return els.sort( this[ sortfunc ]); }, getvalue : function( a, b ){ return { : $(a).find('td:eq('+ sorter.column +')').text(), b : $(b).find('td:eq('+ sorter.column+')').text() } }, comp : function( val ) { if ( val.a == val.b ) { return 0; } return val.a > val.b ? sorter.order[0]:sorter.order[1] ; }, id : function( , b ){ var val = sorter.getvalue(a,b); val.a = parseint( val.a , 10 ); val.b = parseint( val.b , 10 ); return sorter.comp( val ); }, notify : function( , b ){ var val = sorter.getvalue(a,b); return sorter.comp( val ); }, date : function( , b ){ var val = sorter.getvalue(a,b); val.a = getdate( val.a ); val.b = getdate( val.b ); return sorter.comp( val ); } } $('table thead').on('click', 'th', function(){ var sorted = sorter.setorder( $(this).attr('data-order') ) .setcolumn( $(this).attr('data-column') ) .setkey( $(this).attr('data-key') ) .sort( $('table tbody tr') ); $('table tbody').empty().append( sorted ); $('table thead th').not( ) .attr('data-order' ,'asc'); $(this).attr( 'data-order', ( $(this).attr('data-order') == 'asc' ? 'desc' :'asc') ); }); }); </script> </body> </html> 
Comments
Post a Comment