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

我已经看到了很多关于这个的问题，但是我似乎无法让它工作

我有一个数据表，但我不能让它工作。我将python flask与引导一起使用，并使用to_html（）将pandas数据框更改为html表

身份证件
用户
地位
1.
1.
1.
2.
1.
1.

在身体底部我有：

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

$（文档）.ready（函数（）{
$（'#数据表示例'）。数据表({
是的，
“延迟渲染”：正确，
“栏目”：[
{“数据”：“id”}，
{ 
“数据”：“网络链接”，
“呈现”：函数（数据、类型、行、元）{
如果（类型==‘显示’）{
返回$（''）
.attr（'href'，数据）
.文本（数据）
.wrap（“”）
.parent（）
.html（）；
}否则{
返回数据；
}
}
} 
]
});
});

---

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

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

从的datatables文档：

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

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

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

“列”：[
{“数据”：“id”}，
{ 
“数据”：“网络链接”，
“呈现”：函数（数据、类型、行、元）{
如果（类型==‘显示’）{
返回$（''）
.attr（'href'，数据）
.文本（数据）
.wrap（“”）
.parent（）
.html（）；
}否则{
返回数据；
}             
}
},
{“数据”：“状态”}//添加了第三列定义
]

当您有一个DOM

并且只需要针对一个或几个列时使用：

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

$（'#数据表示例'）。数据表({
摧毁：没错，
是的，
columnDefs:[{
目标：0，//我们可以看到原始数据框中的数据吗？为什么是
pandas
标记？为什么是
python
标记？非常感谢JSFIDLE示例，否则我会花很长时间才找到dataTables。rowroreorder.js是使用此功能的单独脚本。我将.text改为.text（'myurl？id='+data）；你知道我怎么显示数据（id）而不是整个url吗？嘿@user3605780-
.attr（'href'，'myurl？id='+data）
然后离开
.text（数据）
…？这是您要更改的
href
。是的，您说得对。在重复检查之前快速询问。感谢您的帮助，它现在正在工作。我唯一想知道的是，是否可以使整个字段可点击，或者我是否需要添加可点击的图像？
$('#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;
      }
     }
  }] 
})