CODEWITHSUNDEEP
javascriptjquerytablesorter
maaz
maaz

Reputation: 3666

jQuery Tablesorter - does not sort date field

I am using jQuery table sorter to sort the table. it sorts all the columns except the column which is having date field. date has Sep 3, 2012 this format. how to solve this problem?

sample dates:

Upvotes: 1

Views: 732

Answers (1)

Mottie
Mottie

Reputation: 86413

I have a fork of tablesorter that allows you to write a parser that can extract data from the table cell attributes, like a data-attribute.

In this example I have a birthday column with different formats but the data-date attribute of the cell is consistent.

<table> 
<thead> 
  <tr> 
    <th>Name (Last)</th> 
    <th>Originally from...</th> 
    <th>Birthday</th> 
  </tr> 
</thead> 
  <tbody> 
    <tr> 
      <td data-lastname="Allen">Joe Allen</td> 
      <td>South Carolina</td> 
      <td data-date="01-15">Jan 15</td> 
    </tr> 
    <tr> 
      <td data-lastname="Torres">Lisa Torres</td> 
      <td>Maryland</td> 
      <td data-date="03-02">March 2nd</td> <!-- leading zeros needed to sort properly! --> 
    </tr> 
    <tr> 
      <td data-lastname="Franklin">Peter Louis Franklin</td> 
      <td>Coventry</td> 
      <td data-date="12-26">Boxing Day (Dec 26th)</td> 
    </tr> 
    <tr> 
      <td data-lastname="Jones">Maria Consuela de Los Angeles Ortiz Del Toro-Jones</td> 
      <td>Texas</td> 
      <td data-date="05-10">10 Mayo</td> 
    </tr> 
    <tr> 
      <td data-lastname="Bigglesworth">Mike "the Smasher" Bigglesworth</td> 
      <td>Rhode Island</td> 
      <td data-date="06-22">22nd of June</td> 
    </tr> 
    <tr> 
      <td data-lastname="Smith">Fredrick Smith</td> 
      <td>Ohio</td> 
      <td data-date="03-10">10th Mar</td> 
    </tr> 
  </tbody> 
</table>

Parser - note this parser code will only work with this modified version of tablesorter

// add parser through the tablesorter addParser method 
$(function(){ 

  $.tablesorter.addParser({ 
    // set a unique id 
    id: 'data', 
    is: function(s) { 
      // return false so this parser is not auto detected 
      return false; 
    }, 
    format: function(s, table, cell, cellIndex) { 
      var $cell = $(cell); 
      // I could have used $(cell).data(), then we get back an object which contains both 
      // data-lastname & data-date; but I wanted to make this demo a bit more straight-forward 
      // and easier to understand. 

      // first column (zero-based index) has lastname data attribute 
      if (cellIndex === 0) { 
        // returns lastname data-attribute, or cell text (s) if it doesn't exist 
        return $cell.attr('data-lastname') || s; 

      // third column has date data attribute 
      } else if (cellIndex === 2) { 
        // return "mm-dd" that way we don't need to use "new Date()" to process it 
        return $cell.attr('data-date') || s; 
      } 

      // return cell text, just in case 
      return s; 
    }, 
    // set type, either numeric or text 
    type: 'text' 
  }); 

  $('table').tablesorter({ 
    headers : { 
      0 : { sorter: 'data' }, 
      2 : { sorter: 'data' } 
    }, 
    widgets: ['zebra'] 
  }); 

});

Upvotes: 1

Related Questions