Question

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

我有一个数据表，但我无法让它工作。我使用带有bootstrap的python-flask，并使用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>

在身体的底部我有：

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

我已经看了很多芒果，但是他们都在javascript中包含json数据，而我的数据已经在html中了。

Answer 1

当您拥有DOM <table>并且只需要定位一列或几列时，请使用columnDefs：

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

它在这里工作 - ＆gt;的 http://jsfiddle.net/j9ez0sbj/

Answer 2

您的html表中有3列，但在初始化中只定义了2列。

来自columns initialization option的数据表文档：

请注意，如果使用列来定义列，则必须在数组中为表中的每个列添加一个条目（如果您不希望指定任何选项，则这些条目可以为null）。 / p>

根据您的意图，至少您需要为第三列添加定义，如下所示：

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

将href超链接添加到datatable中的行或字段

2 个答案: