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

Question

如何在 jQuery DataTable

中将列数据设为超链接

这是我的 table

        <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>。

Answer 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;
      }
    }
  ]
});