将列数据作为超链接（dataTable JQUERY）

Posted 2023-05-09

【中文标题】将列数据作为超链接（dataTable JQUERY）

【英文标题】：make column data as hyperlink (dataTable JQUERY)

【发布时间】：2021-03-03 16:21:12

【问题描述】：

我正在尝试将一列作为带有数据表的超链接，但没有成功。

函数成功回调(responseObj)

  $(document).ready(function() 
         $('#example').dataTable( 
        "data":responseObj ,
        "bDestroy": true,
        "deferRender": true ,
        "columns": [
                     "data": "infomation" ,
                     "data": "weblink" ,
                ]
   );

   );

我需要网络链接来显示链接并成为该列中的超链接，以便用户可以单击并被重定向到另一个页面。我查看了render，但链接信息较少，我无法成功。

我也查看了这个example，但没有多大帮助。

【参考方案1】：

使用columns.render API 方法为单元格动态生成内容。

$('#example').dataTable(
   "data": responseObj,
   "columns": [
       "data": "information" , 
       
         "data": "weblink",
         "render": function(data, type, row, meta)
            if(type === 'display')
                data = '<a href="' + data + '">' + data + '</a>';
            

            return data;
         
       
   ]
);

有关代码和演示，请参阅 this example。

【讨论】：

如果我还想让使用相同链接的第一列（A1-A4）可点击怎么办？当我想要多列可点击时遇到问题，但对href 使用相同的源。希望这是有道理的。

@Trm，您可以为其余列定义相同的columns.render 函数，而不是使用data 使用row['weblink']。或者您可以使用columnDefs.render 并定义一次render 函数并使用columnDefs.targets 选项定位所有必需的列。

我尝试使用columnsDefs，也许我遗漏了一些东西，但问题是每列呈现了不同的数据。 Here's how my code looks

@Trm，正如我之前所说，使用full['name'] 而不是data。

如果我没有来自对象的数据怎么办？如果我只是用 php 循环并且想要围绕循环数据的锚标记怎么办？

【参考方案2】：

如果您希望根据其他列数据添加链接，则可以使用以下方法。

$('#example').dataTable(
   "data": responseObj,
   "columns": [
       "data": "information" , 
       
         "data": "weblink",
         "render": function(data, type, row, meta)
            if(type === 'display')
                data = '<a href="' + row.myid + '">' + data + '</a>';
            
            return data;
         
       
   ]
);

我刚刚更改了渲染功能。 data 仅指当前列数据，而row 对象指整行数据。因此，我们可以使用它来获取该行的任何其他数据。

【讨论】：

如何使用行选择器row.myid？我提供的 Ajax 数据具有用于单元格内容的字符串列和不用于呈现单元格的 int 列，但理想情况下我可以用来组装链接。这正是我想要做的！

我正在使用rowId: "taskno"（rowId 选项）在 html 中为tr 标记设置id 属性，然后使用row.myid 来引用/获取它。参考：datatables.net/reference/option/rowId

我最终组装了这样的网址data = '<a href="/url/' + row['col2'] + '">' + data + '</a>';

这个答案拯救了我的一天，即使它是旧的

【参考方案3】：

    $('#example').dataTable( 
  "columnDefs": [ 
    "targets": 0,
    "data": "download_link",
    "render": function ( data, type, full, meta ) 
      return '<a href="'+data+'">Download</a>';
    
   ]
 );

来自documentation。这对我来说非常清楚和直截了当，你不明白的具体是什么？你看到了什么错误？

更完整的例子见here

【讨论】：

如果我有"targets": [0,1]，你知道是否有解决方法，他们都会使用第一列（目标0）中的数据？

请参阅我的答案中的文档链接。第三个参数是行数据（不知道为什么在我的示例中我将变量称为“full”，但它是一个包含行中所有数据的数组

上帝保佑你。文档代码示例也说“完整”，所以这就是我猜你叫它的原因。我使用full.column_name 来获取数据。我已经多次阅读文档，但措辞从来没有让我点击它返回完整的行数据。