CODEWITHSUNDEEP
javascriptsortinglistjs
3gwebtrain
3gwebtrain

Reputation: 15303

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?

Upvotes: 8

Views: 4530

Answers (2)

Mohammed Joraid
Mohammed Joraid

Reputation: 6480

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

With each date you display, add a Timestamps value in HTML and then compare/sort Timestamps values.

One suggestion would be to add the timestamp value as a second hidden HTML span in same level where you display your dates. The Timestamp will be used for sorting.

Here's an example of what I used:

My list is working as a table, and here the <td> is the main container. Then, 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, use the second Span c_start_ts and have it hidden. In c_start_ts I put the timestamp value as an whole int number, 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 :)

Upvotes: 8

zeamedia
zeamedia

Reputation: 121

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.

Upvotes: 12

Related Questions