How to sort a html table by dates in textfields?

Question

I am using DataTable Plugin for html table sorting. It is working fine. Now I have a column with Dates(d/m/Y) in textboxes. Sorting on that column is not working. I want to make this sortable by date.

First I applied the following code to make textbox sortable.

Table with 3 fields:

<script type='text/javascript' charset='utf-8'>

                $.fn.dataTableExt.afnSortData['dom-text'] = function  ( oSettings, iColumn ) {
                    var aData = [];
                    $( 'td:eq('+iColumn+') input', oSettings.oApi._fnGetTrNodes(oSettings) ).each( function () {
                        aData.push( this.value );
                    } );
                    return aData;
                }


                $(document).ready(function() {
                    $('#sortableTable').dataTable( {
                        'aoColumns': [null, null,{ 'sSortDataType': 'dom-text' }]
                    } );
                } );


</script>

Date sorting is working fine on date column without text fields.

How to apply date sorting on date in textbox.

EDIT:

There are following functions in jquery.dataTables.js

"date-asc": function ( a, b )
        {
            var x = Date.parse( a );
            var y = Date.parse( b );

            if ( isNaN(x) || x==="" )
            {
            x = Date.parse( "01/01/1970 00:00:00" );
            }
            if ( isNaN(y) || y==="" )
            {
                y = Date.parse( "01/01/1970 00:00:00" );
            }

            return x - y;
        },

        "date-desc": function ( a, b )
        {
            var x = Date.parse( a );
            var y = Date.parse( b );

            if ( isNaN(x) || x==="" )
            {
            x = Date.parse( "01/01/1970 00:00:00" );
            }
            if ( isNaN(y) || y==="" )
            {
                y = Date.parse( "01/01/1970 00:00:00" );
            }

            return y - x;
        },

@jasper: If you placed that comment as answer then I will surely accept it. I searched my answer during reading this page that you mentioned. — Awan
– Awan, Commented Aug 23, 2010 at 10:49
I just wasn't sure - usually askers have tried the first google result already :P — Jasper
– Jasper, Commented Aug 23, 2010 at 10:55
Give a look at DynamicTable, tiny JavaScript library for sorting, filtering and paging HTML tables. Demo is available here. MIT licensed. — dave
– dave, Commented Sep 12, 2012 at 12:43

Jasper · Accepted Answer · 2010-08-23 10:54:49Z

2

The manual of the DataTable has a page on exactly that subject, perhaps it can help you find an answer to your question.

answered Aug 23, 2010 at 10:54

Jasper

12k6 gold badges40 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Awan · Accepted Answer · 2010-08-23 10:46:21Z

0

<script type='text/javascript' charset='utf-8'>

                $.fn.dataTableExt.afnSortData['dom-text'] = function  ( oSettings, iColumn ) {
                    var aData = [];
                    $( 'td:eq('+iColumn+') input', oSettings.oApi._fnGetTrNodes(oSettings) ).each( function () {
                        aData.push( this.value );
                    } );
                    return aData;
                }


                $(document).ready(function() {
                    $('#sortableTable').dataTable( {
                        'aoColumns': [null, null,{ 'sSortDataType': 'dom-text', 'sType': 'date' }]
                    } );
                } );


</script>

answered Aug 23, 2010 at 10:46

Awan

18.7k38 gold badges94 silver badges133 bronze badges

Collectives™ on Stack Overflow

How to sort a html table by dates in textfields?

How to apply date sorting on date in textbox.

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

How to apply date sorting on date in textbox.

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related