用于添加超链接的数据格式化程序不起作用

我正在尝试在javascript中呈现一个表，如下所示：

$('#serviceTable').DataTable({
        responsive: true,
        aaData: services,
        bJQueryUI: true,
             aoColumns: [
                     { mData: 'service_name' },
                     { mData: 'last_incident' },
                     { mData: 'integration' }
                ]
      });

我想要第 service_name 列中文本的超链接。我尝试在表定义中添加data-formatter

如下所示

<table id="serviceTable" class="table table-bordered table-striped">
  <thead>
  <tr>
    <th data-field="service_name" data-formatter="LinkFormatter">Service</th>
    <th data-field="last_incident">Last Incident</th>
    <th  data-field="integration">Integration</th>
  </tr>
  </thead>
</table>

和相应的功能

function LinkFormatter(value, row, index) {
        return "<a href='/service/"+row.service_id+"'>"+value+"</a>";
}

但这不会添加超链接。谁能帮忙？

尝试使用如下所示的render。

  $('#serviceTable').DataTable({
        responsive: true,
        aaData: service,
        bJQueryUI: true,
             aoColumns: [
                     { 
                       mData: 'service_name' ,
                       "render": function(value, type, row, meta){
                        return "<a href='/service/"+row.service_id+"'>"+value+"</a>";
                       }
                     },
                     { mData: 'last_incident' },
                     { mData: 'integration' }
                ]
      }

(;

工作示例

  <head>
    <link rel="stylesheet" href="//cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
  </head>
  <body>
    <table id="serviceTable" class="table table-bordered table-striped">
        <thead>
          <tr>
                <th data-field="service_name" data-formatter="LinkFormatter">Service</th>
                <th data-field="last_incident">Last Incident</th>
                <th  data-field="integration">Integration</th>
          </tr>
          
  </thead>
</table>
  </body>
  <script>
  var service=[{"service_id" :"1", "service_name":"Service 1","last_incident":"i1","integration":"i2"}
        ,{"service_id" :"2", "service_name":"Service 2","last_incident":"i1","integration":"i2"}
        ];
    $('#serviceTable').DataTable({
        responsive: true,
        aaData: service,
        bJQueryUI: true,
             aoColumns: [
                     { 
                       mData: 'service_name' ,
                       "render": function(value, type, row, meta){
                        return "<a href='/service/"+row.service_id+"'>"+value+"</a>";
                       }
                     },
                     { mData: 'last_incident' },
                     { mData: 'integration' }
                ]
      });
     
  </script>

你试过数据表render选项吗？数据表列呈现

$('#serviceTable').DataTable({
    responsive: true,
    aaData: services,
    bJQueryUI: true,
         aoColumns: [
                 { mData: 'service_name',
                   render: function(data, type, row) {
                   return '<a href="/service/'+row.service_id+'">'+value+'</a>';
                   }
                 },
                 { mData: 'last_incident' },
                 { mData: 'integration' }
            ],
});

相关内容

最新更新

热门标签：