Question

我有一张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/

Javascript数据表使用JSON数据上的渲染函数生成HTML链接

1 个答案: