简体   繁体   中英

How to make a column data as hyperlink in jQuery DataTable

How to make a column data as hyperlink in jQuery DataTable

Here's my table

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

Here's my Script

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

I want to make the column Number 1 as hyperlink and it should get the number from the database <a href="tel:value from database"> value from dataase </a> .

You can use columns.render option to make the column Number 1 as hyperlink and get the number from the database like:

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM