将 href 超链接添加到数据表中的行或字段

Question

I've seen a lot of questions about this, however I cannot seem to get it working.

I have a datatable but I cannot get it to work. I use python-flask with bootstrap and I change a pandas dataframe to a html table with to_html().

<table width="100%" class="table table-striped table-bordered table-hover dataTable" id="dataTables-example"><thead>
<tr style="text-align: right;">
  <th>id</th>
  <th>user</th>
  <th>status</th>
</tr>
</thead>
<tbody>
  <tr>
  <td>1</td>
  <td>1</td>
  <td>1</td>
</tr>
<tr>
  <td>2</td>
  <td>1</td>
  <td>1</td>
</tr>
</tbody>
</table>

and at the bottom of the body I have:

<script>
$(document).ready(function() {
$('#dataTables-example').DataTable({

        "bDestroy": true,
       "deferRender": true,
       "columns": [
          { "data": "id" }, 
          { 
             "data": "weblink",
             "render" : function(data, type, row, meta){
                if(type === 'display'){
                   return $('<a>')
                      .attr('href', data)
                      .text(data)
                      .wrap('<div></div>')
                      .parent()
                      .html();

                } else {
                   return data;
                }
             }
          } 
       ]
    });
});
</script>

I've looked at a lot of awnsers however they all contain the data as json in the javascript while my data is already in the html.

Answer 1

Use columnDefs when you have a DOM <table> and only need to target one or few columns :

$('#dataTables-example').DataTable({
  destroy: true,
  deferRender: true,
  columnDefs: [{ 
    targets: 0, //<-- index of column that should be rendered as link
    render : function(data, type, row, meta){
      if (type === 'display'){
         return $('<a>')
           .attr('href', data)
           .text(data)
           .wrap('<div></div>')
           .parent()
           .html();
      } else {
         return data;
      }
     }
  }] 
})

It works here -> http://jsfiddle.net/j9ez0sbj/

Answer 2

You have 3 columns in your html table but only define 2 columns in your initialization.

From datatables documentation for the columns initialization option :

Note that if you use columns to define your columns, you must have an entry in the array for every single column that you have in your table (these can be null if you don't wish to specify any options).

Depending on what your intent is, at the very least you need to add a definition for the third column, so something like this:

"columns": [
      { "data": "id" }, 
      { 
         "data": "weblink",
         "render" : function(data, type, row, meta){
            if(type === 'display'){
               return $('<a>')
                  .attr('href', data)
                  .text(data)
                  .wrap('<div></div>')
                  .parent()
                  .html();

            } else {
               return data;
            }             
         }
      },
      { "data": "status" } // Third column definition added 
   ]