Question

我正在使用bootstrap数据表来简单地呈现我的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格式，我想显示带列号的超链接，所以我的目标是添加一个列，其中包含一个手册列表编号的文本和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>

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

Answer 1

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

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

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

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

然后它就像魅力一样。

数据表可以使用json中包含的href来单击单元格

1 个答案: