javascript dates, table sorting and jQuery

If you need to display date data in an HTML table and you want to use a nice display format yet still be able to sort correctly (i.e. as a date and not as text), here is how to do it.

Firstly, you need jQuery.
Then, one of the nicer jQuery table plugins, tableSorter.
And, finally, one of the coolest js date handlers, dateJS.

HTML:

<script src="jquery-1.3.2.min.js" type="text/javascript"></script>

<script src="date.js.min.js" type="text/javascript"></script>

<script src="tableSorter/jquery.tablesorter.min.js" 

type="text/javascript"></script>

...

...

...

             <table id="dataTable" class="tablesorter">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Login name</th>
                        <th>Active till</th>
                        <th>Last logged in</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                </tbody>
            </table>

Javascript:

// at start of js file

// -----------------------------------------------

// add a custom column sorter

  $.tablesorter.addParser(
  {
    // set a unique id
    id: 'nixDates',
    is: function(s)
    {
      // return false so this parser is not auto detected 

      return false;
    },
    format: function(s)
    {
      var dat = Date.parse(s);

      // format data for sorting. The following date format provides for meaningful sorting.
      var s = dat == null ? '' : dat.toString('yyyy-MM-dd');
      return s;
    },
    // set type, either numeric or text
    type: 'text'
  });
         
// now init the table-handler
  $('table#dataTable').tablesorter(
  {
    headers:
    { 

     // 3rd and 4th columns need special sorting
     2:    {sorter:'nixDates'}
     ,3:   {sorter:'nixDates'}
    }
  });

// -----------------------------------------------

// and later on, at the point where you want to populate the grid

// -----------------------------------------------

  var newRow;
  var fmtDat;

  var idx;

  var numberOfRows;  // this is set by earlier code not shown here
           
  for (idx = 0; idx < numberOfRows; idx++)
  {

     //gDataTable contains a jQuery object pointing to our 'table tbody'
     newRow = $('<tr></tr>').appendTo(gDataTable);
     $(newRow)
       .append('<td class="rowKey">' + data[idx].id + '</td>'
       +    '<td>' + data[idx].loginName + '</td>'
       );
               
       // Any fancy date format can be used here (thanks to dateJS).
       // Also, the sorting issue is taken care of by a custom sort handler on tablesorter. See top of this file.
       fmtDat = data[idx].activeTill == null ? '' : Date.parse(data[idx].activeTill).toString('ddd, dd MMM yyyy');
       $(newRow).append('<td fieldname="activeTill">' + fmtDat + '</td>');
               
       fmtDat = data[idx].lastLoggedIn == null ? '' : Date.parse(data[idx].lastLoggedIn).toString('ddd, dd MMM yyyy');
       $(newRow).append('<td fieldname="lastLoggedIn">' + fmtDat + '</td>');
       }
  }

// -----------------------------------------------

Note that a lot of code has been left out; the above is simply there to demonstrate the code specific to formatting the dates, as well as setting up and loading the grid.


ps: Comments and/or links to this article are most welcome!



Related articles by Zemanta

• DataTables (table plug-in for jQuery) (konigi.com)
• 40 Excellent jQuery Plugins To Work With Data Presentation and Grid Layout | AEXT.NET (aext.net)