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或{{ 1}}最终匹配所有行。

它删除了div选项中的HTML，然后缓存结果，因为DataTables多次运行mRender函数。

<强> JsFiddle Example

警告可编辑表格

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

<强>步骤1

在某处包含以下javascript：

mRender

第2步

在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; }内的"mRender": mRenderFactory(i)内设置您希望HTML被剥离的列，其中aoColumns是列的索引。非常重要的是你得到了正确的i，因为如果你没有，那么表格会显示正常，但会对错误的列进行排序和过滤。

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

jQuery DataTables - 当date也是一个链接时，排序不起作用

4 个答案: