将 URL 添加到 jQuery Datatables 数据集？

Question

我有一个动态构建的 jquery 数据表，这意味着每一行都是使用 php mysql 数据库调用构建的。创建表本身没问题，但有时我想为集合中显示的数据添加超链接。

例如：

ID   |    Date       |   Amount
----------------------------
1    | April 1, 2011 |  3.95
2    | April 5, 2011 |  4.55
3    | May 9, 2011   |  19.32 

问题是，上面的日期将是一个超链接，并且 URL 中的日期格式将是 YYYY-mm-dd 格式。

当我这样做时，datatables 想要将整个 URL 视为一个数据元素，因此我可以在事后对表进行任何排序。

以前有人遇到过这个问题吗？我似乎在网上找不到任何东西。

Answer 1

要对非标准列进行排序，您可以定义特定的函数：在这里您可以找到其中的一些：http://datatables.net/plug-ins/sorting。

在您的情况下，您可以像这样定义自己的排序函数：

jQuery.fn.dataTableExt.oSort['my-date-asc']  = function(a,b) {
    var x = a.match(/date=(.*?)"/)[1].toLowerCase();
    var y = b.match(/title="(.*?)"/)[1].toLowerCase();
        x = x.replace(/-/g, '');
        y = y.replace(/-/g, '');
    return ((x < y) ? -1 : ((x > y) ?  1 : 0));
};

jQuery.fn.dataTableExt.oSort['title-string-desc'] = function(a,b) {
    var x = a.match(/date=(.*?)"/)[1].toLowerCase();
    var y = b.match(/date=(.*?)"/)[1].toLowerCase();
        x = x.replace(/-/g, '');
        y = y.replace(/-/g, '');
    return ((x < y) ?  1 : ((x > y) ? -1 : 0));
};

Answer 2

您可以在该列上使用 fnRender() 来返回您希望该列显示的任何 html。

bUseRendered: true,
fnRender: function(oObj) {
   var id = oObj.aData[0];
   var normalDate = oObj.aData[1];
   var amount = oObj.aData[2];
   var urlDate = oObj.aData[3];
   var isUrlDate = oObj.aData[4];

   if (isUrlDate) {
      return urlDate;
   }
   else {
      return normalDate;
   }
}

注意

bUseRendered: false

这告诉数据表“在排序时使用传回的数据而不是呈现的 html”

oObj.aData 从该行返回列数据。您可以返回几个额外的 HIDDEN 列，其中包含执行该逻辑所需的数据。然后您的排序仍然有效，并且您还可以访问所需的 url（如果存在）。

Answer 3

我的猜测是，如果没有链接，这很好，但因为列中有一个链接 (html)，它不会像你期望的那样工作。对我来说，这听起来与日期关系不大，而与 HTML 关系更大......

我发现了这个： jquery datatable plugin doesn't seem to sort columns with links properly