Question

我为我经常访问的本地自行车商店建立了一个网站，我目前正在http://mattgreenfield.co.uk/bikestore/store.html主持一个非实时版本。

我刚安装了精彩的list.js（http://listjs.com），以便对商店页面进行排序和过滤（所有者不希望在线销售产品，而是让客户打电话和访问砖块，迫击炮店）。

它似乎工作得很好，但按价格排序按钮似乎没有按价格排序，值应该从高到低排序，但不是。这可能与它有什么关系，只能按数字的第一个数字排序吗？例如，4000英镑的价格似乎低于479英镑 - 第一个数字相同，但7个数字大于0（第二个数字）。

我可能错过了一些简单的东西，因为我复制代码的原始示例按年份排序，年份只有4位数，因此不会出现此问题。

Answer 1

£3,799.99实际上不是一个数字。虽然我们人类很容易忽视逗号和英镑符号，但计算机却不那么聪明。解决方案是用可排序的浮点数替换list.js的内部值。

// loop through the list
$.each(userList.items, function(k, item){
    var val = item._values; 
    // this strips anything that is not a dot or digit
    var price = item._values.price.replace(/[^\d\.]/g,"");
    item._values.price = parseFloat(price); 
});

Answer 2

使用List.js 1.5.0版，List.js Github中出现了一个新的解决方案：

您可以定义一个自定义的 data-attribute （具有简单值）（无逗号，并使用 dot 十进制表示）。

<td class="name">Random Name</td>    
<td class="price" data-price="12345.00">$12,345.00</td>

您必须对options数组进行一些小的更改，如下所示：

<script type="text/javascript">
    var sortableClassValues = [
        "name",
        { name: 'price', attr: 'data-price' }
    ]

    var listOptions = {
        valueNames: sortableClassValues
    };

    var myList = new List('table_ID', listOptions);
</script>

如果要使用默认排序，则可以在初始化列表后添加：

myList.sort("price", {
    order: "desc"
});

这是一个工作示例，链接自Github：https://kanaxx.github.io/listjs/number-sort.html

精彩list.js的问题和按价格排序

2 个答案: