Jquery-向数据表添加超链接

Jquery - Add hyperlink to datatables

本文关键字：超链接 添加 数据表 Jquery-      更新时间：2023-09-26

使用DataTable插件，我可以很好地生成一个表，但我希望在其中一列上有一个自定义超链接，链接到另一个页面，但从行的其余部分获取信息。。。例如，在第1行中，我想要一个超链接：http://url/?data['imdata'][i]['falltInt'][["attributes"][["code"]或类似的东西。我从其他形式中看到了很多复杂的例子，但无法将其付诸实践。寻找最简单的解决方案，因为这是一个附带项目，我需要它来完成。

$(document).ready(function(){
        $.getJSON('/static/faults.json', function (data) {
            var test = $('#table5').DataTable({
            });
            var tr;
            for (var i = 0; i < data["totalCount"]; i++) {
              test.row.add([
                  data['imdata'][i]['faultInst']["attributes"]["code"],
                  data['imdata'][i]['faultInst']["attributes"]["cause"],
                  data['imdata'][i]['faultInst']["attributes"]["descr"],
                  data['imdata'][i]['faultInst']["attributes"]["created"],
                  data['imdata'][i]['faultInst']["attributes"]["changeSet"],
                  data['imdata'][i]['faultInst']["attributes"]["childAction"],
                  data['imdata'][i]['faultInst']["attributes"]["dn"],
                  data['imdata'][i]['faultInst']["attributes"]["domain"],
                  data['imdata'][i]['faultInst']["attributes"]["highestSeverity"],
                  data['imdata'][i]['faultInst']["attributes"]["lastTransition"],
                  data['imdata'][i]['faultInst']["attributes"]["lc"],
                  data['imdata'][i]['faultInst']["attributes"]["occur"],
                  data['imdata'][i]['faultInst']["attributes"]["origSeverity"],
                  data['imdata'][i]['faultInst']["attributes"]["prevSeverity"],
                  data['imdata'][i]['faultInst']["attributes"]["rule"],
                  "test",
                  //data['imdata'][i]['faultInst']["attributes"]["Severity"],
                  data['imdata'][i]['faultInst']["attributes"]["subject"],
                  data['imdata'][i]['faultInst']["attributes"]["type"],
                  //data['imdata'][i]['faultInst']['attributes']["ack"]
                  "test",
                  "test"
              ])
            }
            test.draw();
        });
    });

当您有这样的设置时，只需避免定义data，这样您就可以获得可以转换为链接的正确值。dataTables知道它应该通过targets值将哪些数据传递给render函数。示例：

var table = $('#example').DataTable({
    columnDefs : [
      { targets : [0],
        render : function(data) {
          return '<a href="'+data+'" target_blank>'+data+'</a>'
        } 
      }
    ]
})  
table.row.add(['https://example.com', 'david', 'programmer']).draw()

演示->http://jsfiddle.net/47k7nhkb/

相关文章：