jQuery DataTables - 当日期也是链接时排序不起作用

Question

我注意到当日期也是链接时，英国日期排序不起作用。

示例 1. (demo)

这里的日期纯属测试。工作正常。

       <tr>
            <td>01/01/01</td>
            <td>Tarik</td>
            <td>Rashad Kidd</td>
            <td>1 34 238 6239-0509</td>
        </tr>

示例 2。(demo)

这里的日期也是一个链接。根本不起作用。不过没有抛出任何错误。

         <tr>
            <td><a href="#">01/01/01</a></td>
            <td>Tarik</td>
            <td>Rashad Kidd</td>
            <td>1 34 238 6239-0509</td>
        </tr>

我还注意到排序确实适用于任何其他元素，即使它们是链接。只有作为链接的日期才是问题所在。

我正在使用以下 JS 代码：

// UK Date Sorting
jQuery.fn.dataTableExt.oSort['uk_date-asc']  = function(a,b) {
    var ukDatea = a.split('/');
    var ukDateb = b.split('/');

    var x = (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
    var y = (ukDateb[2] + ukDateb[1] + ukDateb[0]) * 1;

    return ((x < y) ? -1 : ((x > y) ?  1 : 0));
};

jQuery.fn.dataTableExt.oSort['uk_date-desc'] = function(a,b) {
    var ukDatea = a.split('/');
    var ukDateb = b.split('/');

    var x = (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
    var y = (ukDateb[2] + ukDateb[1] + ukDateb[0]) * 1;

    return ((x < y) ? 1 : ((x > y) ?  -1 : 0));
}


$(document).ready(function() {

    $('#table').dataTable( {
        "bPaginate": true,
        "bLengthChange": true,
        "bFilter": true,
        "aoColumnDefs" : [
            { "aTargets" : ["uk-date-column"] , "sType" : "uk_date"}
        ]
    });

});

非常感谢任何帮助。

Answer 1

问题是你的排序功能被多余的html弄糊涂了。你应该像这样修改你的函数：

// UK Date Sorting
jQuery.fn.dataTableExt.oSort['uk_date-asc']  = function(a,b) {  
    //use text()
    var ukDatea = $(a).text().split('/');
    var ukDateb = $(b).text().split('/');

    var x = (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
    var y = (ukDateb[2] + ukDateb[1] + ukDateb[0]) * 1;

    return ((x < y) ? -1 : ((x > y) ?  1 : 0));
};

jQuery.fn.dataTableExt.oSort['uk_date-desc'] = function(a,b) {
    //use text()
    var ukDatea = $(a).text().split('/');
    var ukDateb = $(b).text().split('/');

    var x = (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
    var y = (ukDateb[2] + ukDateb[1] + ukDateb[0]) * 1;

    return ((x < y) ? 1 : ((x > y) ?  -1 : 0));
} 

在这里摆弄http://jsfiddle.net/GUb2n/

Answer 2

您可以尝试将日期（ISO 格式）放在链接前面的不可见容器中：

<span style="display: none;">2001-01-01</span><a href="#">01/01/01</a>

那么字母排序应该可以工作。

Answer 3

IIRC，链接数据的不当排序与 DataTables 尝试从表格单元格的内容中剥离 HTML 的方式有关（使用简化的正则表达式），这似乎无法从单元格中完全提取日期数据。

DataTables 1.10+ 可以使用HTML 5 data attributes 来避免这个问题。

如果你在一组<td>标签中有一个链接，像这样：

<td><a href = "someobject">28 July 2015</a></td>

您可以将data-order 属性添加到您的<td> 标签：

<td data-order="2015-07-28"><a href = "someobject">28 July 2015</a></td>

此data-order 属性允许DataTables 对data-order 属性进行排序，并将<td> 标记之间的内容仅用作显示数据。

Answer 4

(v1.9.4) 这个解决方案不仅解决了您的排序问题，还解决了过滤问题，因为过滤器通常与 HTML 匹配，因此搜索 href 或 divend 之类的内容up 匹配所有行。

由于 DataTables 多次运行 mRender 函数，它会去除 mRender 选项中的 HTML，然后缓存结果。

JsFiddle Example

警告可编辑表格

由于缓存机制，可编辑表可能存在问题。

第一步

在某处包含以下 javascript：

var stripHtml = (function() {
    var tmpDiv = document.createElement("DIV");
    return function(html) {
        tmpDiv.innerHTML = html;
        return $.trim(tmpDiv.textContent || tmpDiv.innerText);
    };
})();

var mRenderFactory = function (colIndex) {
    return function (data, type, full) {
        var cache = MRenderCache.getCache(full);

        if (type === "filter" || type === "sort" || type === "type") {
            return cache.getOrElse(colIndex, data, stripHtml)
        }
        return data;
    };
};

var MRenderCache = function () {
    this.full = [];
}
MRenderCache.getCache = function (full) {
    var cache = full[full.length - 1];
    if (cache == null || !cache.MRenderCache) {
        cache = new MRenderCache();
        full.push(cache);
    }
    return cache;
}
MRenderCache.prototype.MRenderCache = true;
MRenderCache.prototype.getOrElse = function (colIndex, rawData, convert) {
    var result = this.full[colIndex];
    if (result === undefined) {
        result = convert(rawData);
        this.full[colIndex] = result;
    }
    return result;
}

第 2 步

将"mRender": mRenderFactory(i) 设置在aoColumns 内的任何您希望去除HTML 的列上，其中i 是该列的索引。获得正确的i 非常重要，因为如果您不这样做，那么表格将正常显示，但会在错误的列上进行排序和过滤。

你的初始化代码看起来像这样：

$(document).ready(function() {
    $('#example').dataTable( {
        "aoColumns": [
            null,
            null,
            { "mRender": mRenderFactory(2) },
            { "mRender": mRenderFactory(3) },
            null
        ]
    } );
} );