Datatable通过json本身包含的href使单元格可点击

Datatable make cell clickable with href included in json itself

本文关键字：单元格 href json 通过 包含 Datatable      更新时间：2023-09-26

我正在使用引导数据表对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');
} );

linkurl提供了我上面提到的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>

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

我已经检查了下面的链接，以便在数据表上进行列渲染：

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>

然后它就像魅力一样发挥作用。

相关文章：