数据表使单元格可单击，其中包含在 json 本身中的 href答案

【问题标题】：Datatable make cell clickable with href included in json itself数据表使单元格可单击，其中包含在 json 本身中的 href
【发布时间】：2016-12-01 08:47:48
【问题描述】：

我正在使用引导数据表来简单地展示我的 json。我正在使用这个 json 来提供数据表：

{
   "manualList":[
      {
         "number":"WFC2062/05",
         "umtype":"PT,SI",
         "lang":"DE",
         "cdnlink":"http://medias.bsh-partner.com/Documents/5550009686_A.pdf",
         "version":"A",
         "filelenght":1002357,
         "urlstatus":true
      },
      {
         "number":"WFC2062/05",
         "umtype":"II,IU",
         "lang":"DE",
         "cdnlink":"http://medias.bsh-partner.com/Documents/5550009685_B.pdf",
         "version":"B",
         "filelenght":6377032,
         "urlstatus":true
      },
      {
         "number":"WFC2062/06",
         "umtype":"PT,SI",
         "lang":"DE",
         "cdnlink":"http://medias.bsh-partner.com/Documents/5550009686_A.pdf",
         "version":"A",
         "filelenght":1002357,
         "urlstatus":true
      },
      {
         "number":"WFC2062/06",
         "umtype":"II,IU",
         "lang":"DE",
         "cdnlink":"http://medias.bsh-partner.com/Documents/5550009685_B.pdf",
         "version":"B",
         "filelenght":6377032,
         "urlstatus":true
      },
      {
         "number":"WFC2062/07",
         "umtype":"II,IU",
         "lang":"DE",
         "cdnlink":"http://medias.bsh-partner.com/Documents/9000029228_C.pdf",
         "version":"C",
         "filelenght":5918430,
         "urlstatus":true
      },
      {
         "number":"WFC2062/08",
         "umtype":"II,IU",
         "lang":"DE",
         "cdnlink":"http://medias.bsh-partner.com/Documents/9000029228_C.pdf",
         "version":"C",
         "filelenght":5918430,
         "urlstatus":true
      }
   ],
   "servicetype":"vibki",
   "errormessage":null,
   "warning":null
}

数据是json格式，我想用列号显示超链接，所以我的目标是添加一个带有一个manualList编号的文本和manuaList的cdnlink超链接的列。但我不知道如何在一个列中同时引用它们。

这是我创建数据表的脚本：

$(document).ready(function() {
    var link = localStorage.getItem("link_url");
   var table = $('#example').DataTable( {
        "ajax": {
            "url": link,
            "dataSrc": "manualList"
        },
        "columns": [
            {
                "data": "cdnlink",
                "render" : function(data, type, row, meta){
                    if(type === 'display'){
                        return $('<a>')
                            .attr('href', data)
                            .text()
                            .wrap('<div></div>')
                            .parent()
                            .html();

                    } else {
                        return data;
                    }
                }
            },
            { "data": "lang" }
        ]
    });
    $('#example')
        .removeClass( 'display' )
        .addClass('table table-striped table-bordered');
} );

link_url 给出了我上面提到的 ajax 响应，因此您可以使用这个示例 json 来评估响应。

这里是包含数据表的简单 HTML 示例：

<div class="container">

    <table id="example" class="display" cellspacing="0" width="100%">
        <thead>
        <tr>
            <th>Number</th>
            <th>Language</th>
        </tr>
        </thead>
        <tfoot>
        <tr>
            <th>Number</th>
            <th>Language</th>
        </tr>
        </tfoot>
    </table></div>

我希望有人可以帮助我，非常感谢您的回复！

【问题讨论】：

标签： javascript jquery json datatable

【解决方案1】：

我已检查以下链接以在数据表上进行列渲染：

https://datatables.net/examples/advanced_init/column_render.html

所以，我又创建了一个不可见的列来将 cdnlink 放在那里，并从列更改为 columnDef，例如：

$(document).ready(function() {
    var link = localStorage.getItem("link_url");
   var table = $('#example').DataTable( {
        "ajax": {
            "url": link,
            "dataSrc": "manualList"
        },
       "columnDefs": [
           {
               "data" : "cdnlink",
               "targets" : 2
           }
           ,
           {// The `data` parameter refers to the data for the cell (defined by the
               // `data` option, which defaults to the column being worked with, in
               // this case `data: 0`.
               "data" : "number",
               "render": function ( data, type, row ) {
                   return $('<a>')
                       .attr({target: "_blank",href: row.cdnlink})
                       .text(data)
                       .wrap('<div></div>')
                       .parent()
                       .html();
               },
               "targets": 0
           },
           {
               "data" : "lang",
               "targets" : 1
           },
           { "visible": false,  "targets": [ 2 ] }
       ]
    });
    $('#example')
        .removeClass('display')
        .addClass('table table-striped table-bordered');
} );

我还在 html 文件中添加了列：

<div class="container">

    <table id="example" class="display" cellspacing="0" width="100%">
        <thead>
        <tr>
            <th>Number</th>
            <th>Language</th>
            <th>Link</th>
        </tr>
        </thead>
        <tfoot>
        <tr>
            <th>Number</th>
            <th>Language</th>
            <th>Link</th>
        </tr>
        </tfoot>
    </table></div>

然后它就像魅力一样。

【讨论】：