CODEWITHSUNDEEP
htmlajaxdatatables
Baobab1988
Baobab1988

Reputation: 715

DataTables: How to display first column (ID) as hyperlink?

I'm trying to display my DataTables table with 3 columns (ID, Name, Date) showing values in my first column (ID) as URLs:

Edited as per @andrewjames request in comments:

<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>

Error I'm getting: TypeError: undefined is not an object (evaluating 'n[m].style')

it relates to the following part of 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
            }));

Could someone tell me what am I doing wrong? thank you in advance!

Upvotes: 2

Views: 447

Answers (1)

andrewJames
andrewJames

Reputation: 21908

Your DataTable defines 4 columns: ID, Name, Date, and the link.

It does not define any column title values, only the column data values - therefore it relies on the HTML table for these. However, there are only 3 columns defined. Add that 4th missing <tr> to both the <thead> and <tfoot> sections.

That should help to resolve the specific error you are getting.

Upvotes: 1

Related Questions