如何在 jQuery DataTable 中将列数据作为超链接

Posted 2023-05-09

【中文标题】如何在 jQuery DataTable 中将列数据作为超链接

【英文标题】：How to make a column data as hyperlink in jQuery DataTable

【发布时间】：2020-08-20 03:49:04

【问题描述】：

这是我的桌子

        <thead>
         <tr>
          <th>Province</th>
          <th>District</th>
          <th>Number 1</th>
       </tr>
     </thead>

这是我的脚本

function fill_datatable(filter_district = '', filter_outlet = '')
    
        var dataTable = $('#outlet_data').DataTable(
            processing: true,
            serverSide: true,
            ajax:
                url: " route('customsearch.index') ",
                data:filter_district:filter_district, filter_outlet:filter_outlet
            ,
            columns: [

                
                    data:'province',
                    name:'province'
                ,
                
                    data:'district',
                    name:'district'
                ,
                
                    data:'no1',
                    name:'no1'
                
            ]
        );
    

我想将第 1 列设为超链接，它应该从数据库<a href="tel:value from database"> value from dataase </a> 中获取数字。

【参考方案1】：

您可以使用columns.render 选项将Number 1 列作为超链接并从数据库中获取数字，例如：

var dataTable = $('#outlet_data').DataTable(
  processing: true,
  serverSide: true,
  ajax: 
    url: " route('customsearch.index') ",
    data: 
      filter_district: filter_district,
      filter_outlet: filter_outlet
    
  ,
  columns: [
    
      data: 'province',
      name: 'province'
    ,
    
      data: 'district',
      name: 'district'
    ,
    
      data: 'no1',
      "render": function(data, type, row, meta) 
        if (type === 'display') 
          data = '<a href="tel:' + data + '">' + data + '</a>';
        
        return data;
      
    
  ]
);