【问题标题】:JQuery TinySort not sorting numbers correctlyJQuery TinySort 没有正确排序数字
【发布时间】:2012-02-29 23:10:49
【问题描述】:

我在一个页面上有多个 html 表格,每个表格都有一个标题行。当我单击该列标题时,它应该按该列对所有表进行排序。我特别提到的列包含一个锚点,用于文本显示一个整数值。

当我单击列标题时,我遇到了不正确的排序。假设我在此屏幕负载上有以下内容:

83
84
104

现在我点击列标题,最终结果变为:

104
83
84

我编写了代码以在下次单击时交替排序,结果是 104 和 84 围绕 83 旋转。我认为正在发生的事情是它错误地比较了这些。我已经用更大的数据集对其进行了测试,当任何数字不共享相同的位数时,就会出现问题。

有什么东西(可能是我缺少的标志?)告诉这个东西正确排序吗?我所有更像字符串的数据都正确排序。

代码:

<html>
<head>
    <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="jquery.tinysort.min.js"></script>
    <script language="javascript">
    var aAsc = [];
    $(".SubHead").click(
        function() {
            var nr = $(this).index();
            aAsc[nr] = aAsc[nr]=='asc'?'desc':'asc';
            $('.resultTable>tbody>tr:not(.SubHeadRow)').tsort("td:eq("+nr+")",{order:aAsc[nr]});
       }
   );
    </script>
</head>
<body>
    <table class="resultTable" border="1">
        <tr class="SubHeadRow">
            <td class="SubHead">
                <a href="#">ID</a>
            </td>
            <td class="SubHead">
                <a href="#">Application Header</a>
            </td>
            <td class="SubHead">
                <a href="#">Version Header</a>
            </td>
        </tr>
        .
        .
        .
    </table>
    .
    .
    .
</body>

编辑: 这是插件的链接:http://tinysort.sjeiti.com/

上面我修改了代码以包含 html 外观的示例。我不在它前面,所以它可能不是 100%。并不是我怀疑它很重要,而是表是在 ColdFusion 7MX 中动态创建的。

【问题讨论】:

  • 我不熟悉那个插件,但看起来它们是按字母排序而不是按数字排序。
  • @asawyer 这正是我的想法。只是想弄清楚如何让它以数字方式完成。正在编辑以获取更多信息...

标签: jquery jquery-plugins


【解决方案1】:

好的,

我回答了我自己的问题。今天早上查看 TinySort 网站时,我注意到一个专门用于此的区域。在花费数小时专注于此功能之后,很容易看出它是如何被忽视的。答案在http://tinysort.sjeiti.com/解析自定义排序函数,并进行了一些小的调整。

我为整数列创建了一个自定义案例并传递了一个自定义比较器函数。见下文:

var aAsc = [];
$(".SubHead").click(
    function() {
        var nr = $(this).index();
        aAsc[nr] = aAsc[nr]=='desc'?'asc':'desc';
        if(nr == 0){
            $('.resultTable>tbody>tr:not(.SubHeadRow)').tsort("td:eq("+nr+")", 
                {
                    sortFunction:function(a,b) {
                        var order = (aAsc[nr]=='asc')?1:-1;
                        var i = parseInt(a.s);
                        var j = parseInt(b.s);
                        if( i===j ){
                            return 0;
                        } else {
                            return (i > j)?order:-1*order;
                        }
                    }
                }
            );
        } else {
            $('.resultTable>tbody>tr:not(.SubHeadRow)').tsort("td:eq("+nr+")",{order:aAsc[nr]});
        }
    }
);

【讨论】:

  • TinySort 应该带有将所有值视为数字的选项。
【解决方案2】:

我已经通过在左侧添加零来匹配所有值的长度来为数值创建自定义字段,从而解决了这个问题。

<td data-sort="00000000181661 " class="sk_right">1.816,61 €</td>
<td data-sort="00000000096260 " class="sk_right">962,60 €</td>

var aAsc = [];
function sk_sort_col(id, nr) {
     aAsc[nr] = aAsc[nr] == 'asc' ? 'desc' : 'asc';
     $('table#' + id + '> tbody > tr ').tsort('td:eq(' + nr + ')', { attr: 'data-sort', order: aAsc[nr] });     
}

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2019-06-30
    • 1970-01-01
    • 2019-11-04
    • 1970-01-01
    • 1970-01-01
    • 2019-02-27
    • 1970-01-01
    相关资源
    最近更新 更多