CODEWITHSUNDEEP
javascriptjqueryajaxjquery-pluginsajaxcontroltoolkit
Jareer
Jareer

Reputation: 252

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

Upvotes: 0

Views: 795

Answers (1)

palaѕн
palaѕн

Reputation: 73896

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

Upvotes: 1

Related Questions