的Javascript数据表生成使用渲染功能的JSON数据

Question

我有一个HTML表格HTML链接：

<table id="dattable" class="table table-striped table-bordered hover" cellspacing="0" > 
    <thead> 
     <tr> 
      <th>Name</th> 
      <th>Industry</th> 
      <th>Cost</th> 
     </tr> 
    </thead> 
    <tbody> 
    </tbody> 
</table> 

，它是由JSON数据填充。我想使用render函数使名称列中的项目具有使用id字段的HTML链接，但它不起作用。

var data2 =[ 
    { 
     "id": "0", 
     "name":  "Jack Spicer", 
     "industry__name": "System Architect", 
     "cost":  "$3,120", 
    }, 
    { 
     "id":"1", 
     "name":  "Sean Spice", 
     "industry__name": "Motormouth", 
     "cost":  "-$5,300", 
    } 
]; 

$(document).ready(function() { 
    var table = $('#dattable').DataTable({ 
     data: data, 
     columns: [ 
      { data: 'name', "render": "<a href =" + [, ].id +">"+[, ].name+"</a>"}, //render function 
      { data: 'industry__name' }, 
      { data: 'cost' } 
     ], 


    }); 
}); 

Answer 1

根据您的代码，我认为您需要更改生成所需自定义文本的列的定义。此外，我修改了电话渲染使用函数版本。

var data2 = [{ 
    "id": "0", 
    "name": "Jack Spicer", 
    "industry__name": "System Architect", 
    "cost": "$3,120", 
}, { 
    "id": "1", 
    "name": "Sean Spice", 
    "industry__name": "Motormouth", 
    "cost": "-$5,300", 
}]; 

$(document).ready(function() { 
    var table = $('#dattable').DataTable({ 
     data: data2, 
     columns: [{ 
      'data': null, 
      'render': function(data, type, row, meta) { 
      return '<a href=' + data.id + '>' + data.name + '</a>'; 
      } 
     }, { 
      data: 'industry__name' 
     }, { 
      data: 'cost' 
     }] 
    }); 
}); 

您可以在此采取了很多为好，看到我申请的变化：https://jsfiddle.net/dr3hcd9j/