添加URL到jQuery Datatables数据集


Add URL to jQuery Datatables data set?

我有一个动态构建的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格式。

当我这样做时,数据表想要将整个URL视为数据元素,从而在事实之后打乱我可以对表进行的任何排序。

以前有人遇到过这个问题吗?我好像在网上找不到任何东西。

要对非标准列进行排序,您可以定义特定的函数:这里可以找到其中的一些: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));
};

您可以在该列上使用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(如果存在的话)。

我的猜测是,如果没有链接,这种排序很好,但因为在列中有一个链接(html),它不像您期望的那样工作。对我来说,这听起来和日期关系不大,更多的是和HTML有关…

我发现了这个:Jquery datatable插件似乎不能正确排序带有链接的列