DataTables：如何将第一列（ID）显示为超链接？答案

【问题标题】：DataTables: How to display first column (ID) as hyperlink?DataTables：如何将第一列（ID）显示为超链接？
【发布时间】：2020-09-23 14:01:26
【问题描述】：

我正在尝试显示我的 DataTables 表，其中包含 3 列（ID、名称、日期），将我的第一列 (ID) 中的值显示为 URL：

根据 cmets 中的 @andrewjames 请求进行编辑：

<head>
  <link rel='stylesheet' href='https://cdn.datatables.net/v/dt/dt-1.10.15/datatables.min.css'>
   <script src='https://code.jquery.com/jquery-1.12.4.min.js'></script>
    <script src='https://cdn.datatables.net/v/dt/dt-1.10.15/datatables.min.js'></script>
 <script src='https://cdn.datatables.net/scroller/2.0.3/js/dataTables.scroller.min.js'></script>

</head>

<body translate="no" >
  <table id="example" class="display" cellspacing="0" width="75%">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Date</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Date</th>
            </tr>
        </tfoot>
    </table>

    <script id="rendered-js" >
 $(document).ready(function () {
  $('#example').DataTable({
    "ajax": "url/to/data3.json",
        "columns": [
    { "data": "ID" },
    { "data": "Name" },
    { "data": "Date" },
          { 
         "data": "ID",
          "render": function(data, type, row, meta){
            if(type === 'display'){
                data = '<a href="https://test.com"'+ data +'>' + data + '</a>';
            }

             return data;
         }
      } 
   ],
    "order": [[ 2, "desc" ]],
    "paging": true,
     "deferRender":    true,
     "scrollY":        500,
    "scrollCollapse": true,
    "scroller":       true,
    "initComplete": function () {
         this.api().row( 50000 ).scrollTo();
        }
    } );
} );
    </script>

</body>

我得到的错误： TypeError: undefined is not an object (evalating 'n[m].style')

它与datatables.min.js的以下部分有关：

else {
        j = h(b).clone().css("visibility", "hidden").removeAttr("id");
        j.find("tbody tr").remove();
        var t = h("<tr/>").appendTo(j.find("tbody"));
        j.find("thead, tfoot").remove();
        j.append(h(a.nTHead).clone()).append(h(a.nTFoot).clone());
        j.find("tfoot th, tfoot td").css("width", "");
        n = ta(a, j.find("thead")[0]);
        for (m = 0; m < i.length; m++)
            p = c[i[m]], n[m].style.width = null !== p.sWidthOrig && "" !== p.sWidthOrig ? v(p.sWidthOrig) : "", p.sWidthOrig && f && h(n[m]).append(h("<div/>").css({
                width: p.sWidthOrig,
                margin: 0,
                padding: 0,
                border: 0,
                height: 1
            }));

谁能告诉我我做错了什么？提前谢谢你！

【问题讨论】：

渲染函数的语法对我来说看起来不错。您包含我的数据的代码会正确生成链接。你看到了什么？任何控制台错误？
还有，HTML表格是怎么定义的？
嗨@andrewjames，添加了html文件的和，包括表格。我还分享了我收到的错误消息。你能说出我做错了什么吗？谢谢！

标签： html ajax datatables

【解决方案1】：

您的 DataTable 定义了 4 列：ID、名称、日期和链接。

它没有定义任何列 title 值，只定义列 data 值 - 因此它依赖于 HTML 表来处理这些值。但是，只定义了 3 列。将缺少的第 4 个 <tr> 添加到 <thead> 和 <tfoot> 部分。

这应该有助于解决您遇到的具体错误。

【讨论】：