list.js icon indicating copy to clipboard operation
list.js copied to clipboard

Sorting is not working correctly

Open bdparker opened this issue 6 years ago • 5 comments

Hi! I am new to list.js. It seems easy to use and does what I need. I am running in to a weird problem, however, and I'm not sure why.

When I sort, it works on all columns except for a couple, which sorts the entire list correctly except the first couple cells. Maybe there's a weird thing about the character or data or something, but I'm looking at the original file, the input data, the data how it reads on the screen, and it all seems to be fine. Take a look at my site here: https://goo.gl/vKvVyv. Try clicking the headers to sort by column. They all work fine, except for the Commitment and Paid to Date fields, which do something like this:

In "descending" order: $450 $900 $16,000 $15,500 $15,400 $15,200... and so on

Why are my first couple values not sorted properly?

Thanks! BDPARKER

bdparker avatar Oct 30 '18 13:10 bdparker

Ok, I know why, but I still need a solution.

It's treating the numbers with commas (ie. 16,000) as decimals (so it sees it as 16) and sorts it accordingly. Therefore, $15,500 is less than $400 becuase it sees it as $15.5. How do I fix this? It's doing it with all my columns.

Here's a real example from my site: 18.75% 14.88% 12.70% 5,000.00% 2.89% 1.56%

bdparker avatar Nov 09 '18 15:11 bdparker

Hi

An easy way to sort as number by list.js is defining 'data-xxx' attribute in your data of TD. You can use two types of string, displaying for human and sorting for list.js.

<tr>
<td class='id_name'>002, Blessed Sacrament                   </td>
<td class='id_town'>Rochester                     </td>
<td class='id_give'>107</td>
<td class='id_comm'>$35,862.00</td>
<td class='id_paid'>$34,904.00</td>
<td class='id_goal'>$73,822.00</td>
<td class='id_perc' data-perc='0.4858'>48.58%</td>
</tr>

In addition, you have to change your js code as follows.

<script>
  var options = {
    valueNames: [ 'id_name', 'id_town', 'id_give', 'id_comm', 'id_paid', 'id_goal', 
    //'id_perc' 
    { name: 'id_perc', attr: 'data-perc' }, //*here
    ],
  };
  var tableList = new List('tableID', options);
</script>

Best, Kanaxx

kanaxx avatar Nov 10 '18 04:11 kanaxx

Thanks, I gave it a try. It did not work for me, though. Instead of sorting incorrectly (and seeing commas as decimals), it didn't sort at all. I replaced the 'id_perc' so that it looks like this:

var options = { valueNames: [ 'id_name', 'id_town', 'id_give', 'id_comm', 'id_paid', 'id_goal', { name: 'id_perc', attr: 'data-perc' } ] }; var tableList = new List('tableID', options);

bdparker avatar Nov 13 '18 18:11 bdparker

Another thing, I ran a script to change all commas "," to something else, like a weird character, a "'" or anything else. It does the same thing. It's like it sees the first non-numeric character as a decimal and treats it as such. If I get rid of the character (so that it reads $52586.90, for example), it sorts just fine, but I can't have that.

bdparker avatar Nov 13 '18 19:11 bdparker

@bdparker let me show you my example, https://kanaxx.github.io/listjs/number-sort.html

Commitment and Percent have other value for sorting, data-comm and data-perc. You have to make with data-xxx into all TD column and make a data-xxx's value with only decimal character. Paid to Date and Goal don't have data-xxx attribute and values so these column sort don't work fine.

kanaxx avatar Nov 14 '18 14:11 kanaxx