jquery DataTables使用title对div内容进行数字排序

时间:2013-05-30 07:15:34

标签: jquery jquery-ui sorting datatables jquery-ui-sortable

Hy guys,

我使用此代码对列进行自然排序:

-2
-1
0
1
2



    function naturalSort(a, b) {
    var re = /(^-?[0-9]+(\.?[0-9]*)[df]?e?[0-9]?$|^0x[0-9a-f]+$|[0-9]+)/gi,
        sre = /(^[ ]*|[ ]*$)/g,
        dre = /(^([\w ]+,?[\w ]+)?[\w ]+,?[\w ]+\d+:\d+(:\d+)?[\w ]?|^\d{1,4}[\/\-]\d{1,4}[\/\-]\d{1,4}|^\w+, \w+ \d+, \d{4})/,
        hre = /^0x[0-9a-f]+$/i,
        ore = /^0/,
    // convert all to strings and trim()
        x = a.toString().replace(sre, '') || '',
        y = b.toString().replace(sre, '') || '',
    // chunk/tokenize
        xN = x.replace(re, '\0$1\0').replace(/\0$/, '').replace(/^\0/, '').split('\0'),
        yN = y.replace(re, '\0$1\0').replace(/\0$/, '').replace(/^\0/, '').split('\0'),
    // numeric, hex or date detection
        xD = parseInt(x.match(hre)) || (xN.length != 1 && x.match(dre) && Date.parse(x)),
        yD = parseInt(y.match(hre)) || xD && y.match(dre) && Date.parse(y) || null;
    // first try and sort Hex codes or Dates
    if (yD) if (xD < yD) return -1;
    else if (xD > yD) return 1;
    // natural sorting through split numeric strings and default strings
    for (var cLoc = 0, numS = Math.max(xN.length, yN.length); cLoc < numS; cLoc++) {
        // find floats not starting with '0', string or 0 if not defined (Clint Priest)
        oFxNcL = !(xN[cLoc] || '').match(ore) && parseFloat(xN[cLoc]) || xN[cLoc] || 0;
        oFyNcL = !(yN[cLoc] || '').match(ore) && parseFloat(yN[cLoc]) || yN[cLoc] || 0;
        // handle numeric vs string comparison - number < string - (Kyle Adams)
        if (isNaN(oFxNcL) !== isNaN(oFyNcL)) return (isNaN(oFxNcL)) ? 1 : -1;
        // rely on string comparison if different types - i.e. '02' < 2 != '02' < '2'
        else if (typeof oFxNcL !== typeof oFyNcL) {
            oFxNcL += '';
            oFyNcL += '';
        }
        if (oFxNcL < oFyNcL) return -1;
        if (oFxNcL > oFyNcL) return 1;
    }
    return 0;
};
// Natural Sorting
jQuery.fn.dataTableExt.oSort['natural-asc'] = function (a, b) {
    return naturalSort(a, b);
};
jQuery.fn.dataTableExt.oSort['natural-desc'] = function (a, b) {
    return naturalSort(a, b) * -1;
};

它工作正常,但是如果我将一个带有标题的div作为数字之前的内容,它就无法正常工作:

<div title='juhu'>-1</div >
<div title='juhu'>-2</div >
<div title='juhu'>0</div >
<div title='juhu'>1</div >
<div title='juhu'>2</div >

有没有人有这个问题的解决方案?

1 个答案:

答案 0 :(得分:0)

在您的Javascript中使用console.log很有帮助。如果您记录xN和yN数字,您会看到正数如下所示:<div title="juhu">,1,</div>但负数看起来像<div title="juhu">-,2,</div>

在迭代标记化字符串时,当您将正数与负数进行比较时,第一次比较会将<div title="juhu"><div title="juhu">-进行比较。它会将它们作为纯ASCII进行比较,因此在“asciibetical”顺序中,<div title="juhu">小于<div title="juhu">-

在naturalSort函数的顶部添加:

function naturalSort(a, b) {
 a = typeof a.replace == 'function' ?
        a.replace( /<[\s\S]*?>/g, "" ) : a;
    b = typeof a.replace == 'function' ?
        b.replace( /<[\s\S]*?>/g, "" ) : b;

这将删除HTML标记,并应解决您的问题。

DataTables非常出色,通常会包含您需要的内容。请查看此页面,它可能会有所帮助:http://www.datatables.net/plug-ins/type-detection

我上面使用的代码来自“带HTML的数字”部分。