List.js – By date sorting issue

In my application I am using the List.js for sorting purpose. All the “string” values are working fine. But I do have the “modified date” in the column.

When I click “modified by date” – to sort, this is just considering the date values what is there is the text, ex: 1/4/11.. and sorting accordingly. because of this approach I am getting wrong sort orders.

how can I make instead it should sort by the real value of the number’s what the dates are?

Here is my code:

new List('mfi-col2', {
       valueNames: ['companyLegalName', 'phazeName', 'contactName', 'number', 'enrollId', 'accountType']
                        });

Instead of "number" is it possible to send $(".number").data-number? So let it use the time stamp that I am getting from server?

Or can anyone suggest an alternative for this plugin?

6 thoughts on “List.js – By date sorting issue”

  1. I know this is an old question, but this answer might help new comers.

    Associate your DOM date field with Timestamps and then compare/sort Timestamps values.

    It’s up to you, but one suggestion would be to add it as a second hidden field in same level where you display each of your dates, then when you sort, the whole DOM will be effected.

    Here’s an example of what I used:

    My list is working as a table, and here the <td> is the main container.
    Have two DOM containers at the same level. I used two <span> inside a <td>.

    The first <span> called c_start is the actual date being displayed,
    I have the ability to show it with any desired format (dd/mm/yyyy or dd-mm-yy) because it’s only a display.

    As for the sorting, I will use the second Span c_start_ts and have it hidden. In c_start_ts I put the timestamp value as an INT, it’s a perfect sort. Even if you later want to apply filtering, it will be easier to handle timestamps values since it can be converted numbers and then compared.

    <td class="xlarge-head ">
        <span class="c_start">[[FORMATTED-DATE-HERE]]</span>
        <span class="c_start_ts hide">[[PUT-TIMESTAMP-HERE]]</span>
    </td>
    

    Example

    <td class="xlarge-head ">
        <span class="c_start">01/01/2015</span>
        <span class="c_start_ts hide">1420070400</span>
    </td>
    

    And then I pass c_start_ts to list.js to sort, the TD in the table will get sorted.

    Only recently started to get used to list.js, I see it has potential, but not much docs or support. Hope I helped 🙂

    Reply
  2. You could use a data-attribute, too:

    js

    valueNames: ['date', { name: 'timestamp', attr: 'data-timestamp' }
    

    html

    <td class="date timestamp" data-timestamp="1427713871">30/03/2015</td>
    

    Now you are able to sort via timestamp without a second or hidden field.

    Reply

Leave a Comment