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

问题描述

我正在尝试显示具有3列（ID，名称，日期）的DataTables表，并在第一列（ID）中显示值作为URL：

根据评论中的@ 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：未定义不是对象（正在评估“ 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
            }));

有人可以告诉我我在做什么错吗？预先谢谢你！

解决方法

您的数据表定义了4列：ID，名称，日期和链接。

它不定义任何列myquery = MyTabel.objects.raw('select count(expire) from MyTable where yearweek(expire) = yearweek(now());')值，仅定义列title值-因此，它们依赖于HTML表。但是，仅定义了3列。在data和<tr>部分中添加缺少的第4个<thead>。

这应该有助于解决您遇到的特定错误。

datatables html

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

问题描述

解决方法

相关问答