javascript - 向数据表中的行或字段添加 href 超链接

Question

我看到了很多关于此的问题，但我似乎无法让它发挥作用。

我有一个数据表，但无法让它工作。我将 python-flask 与 bootstrap 结合使用，并使用 to_html() 将 pandas 数据框更改为 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>

在 body 的底部我有:

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

我看过很多 awnsers，但是它们都在 javascript 中包含 json 数据，而我的数据已经在 html 中。

Answer 1

使用 columnDefs 当你有一个 DOM <table> 时并且只需要定位一列或几列:

$('#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;
      }
     }
  }] 
})

它在这里工作 -> http://jsfiddle.net/j9ez0sbj/