Jquery - 添加到数据表的超链接 [英] Jquery - Add hyperlink to datatables

问题描述

使用DataTable插件我能够很好地生成一个表但是我希望在其中一个列上链接到另一个页面的自定义超链接，但是从行的其余部分获取信息...例如在第1行中我想要一个超链接： http：// url /？data ['imdata'] [i] ['faultInst'] [attributes] [code]或类似的东西。我从其他表格中看到了很多复杂的例子，但却无法让它发挥作用。寻找最简单的解决方案，因为这是一个副项目，我需要它完成。

Using the DataTable plugin I am able to generate a table just fine but I want a custom hyperlink on one of the columns that links to another page but taking information from the rest of the row...for example in row 1 I want a hyperlink: http://url/?data['imdata'][i]['faultInst']["attributes"]["code"] or something like that. I've seen a lot of complicated examples from other forms but couldn't get it to work. Looking for the simplest solution as this is a side project and I need it to be completed.

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

推荐答案

如果您有这样的设置，请避免定义数据，通过它您可以获得适当的值，您可以将其转换为链接。 dataTables知道它应该通过 targets 值传递给render函数的数据。示例：

When you have a setup like this, just avoid to define data, by that you get the proper value you can turn into a link. dataTables know which data it should pass to the render function by the targets value. Example :

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

demo - > http://jsfiddle.net/47k7nhkb/

demo -> http://jsfiddle.net/47k7nhkb/

这篇关于Jquery - 添加到数据表的超链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！