Create Hyperlink column to trigger AJAX load with new URL parameter

Create Hyperlink column to trigger AJAX load with new URL parameter

GrahamboGrahambo Posts: 2Questions: 1Answers: 1

Given a v1.10 datatable defined thusly:

...

var oTable = $('#results').DataTable({
  "pageLength": 100,
  "oLanguage": {
    "sSearch": "Search in results:"
  },
  "createdRow": function(row, data, dataIndex) {
    if (data[10] >= 330) {
      $(row).css({ "color": "blue" })
    }
  },
  "ajax": {
    url: 'include/search.php',
    type: 'GET',
    data: {
      // The following values are coming from a search form and the table def is part of the submit button action
      'searchType': "criteria",
      'country': $('select[name=country]').val(),
      'aboNo': $('#aboNo').val(),
      'nameSearchType': $('select[name=nameSearchType]').val(),
      'currAward': $('select[name=currAward]').val(),
      'currAwardCompare': $('select[name=currAwardCompare]').val(),
      'highAward': $('select[name=highAward]').val(),
      'highAwardCompare': $('select[name=highAwardCompare]').val(),
      'aboName': $('#aboName').val()
    }
  }
});

...

I would like to make the 5th column a hyperlink that reloads the AJAX, changing the URL parameters as below:

  "ajax": {
    url: 'include/search.php',
    type: 'GET',
    data: {
      'searchType': "sponsor",
      'spon_no': << the value in the clicked cell from the 5th column >>,
    }
  }

I'm not quite sure how to define the column, nor implement the action on click. Any help would be appreciated.

This question has an accepted answers - jump to answer

Answers

  • GrahamboGrahambo Posts: 2Questions: 1Answers: 1
    Answer ✓

    Adding the following columnDef and defining a function to recreate the table with a new data property for the ajax option worked.

             "columnDefs": [{
                  "targets": [4],
                  "mData": null,
                  "mRender": function(data, type, full) {
                      return '<a href="" onclick="event.preventDefault(); searchSponsor(' + data[15] + ');">' + data[6] + '</a>';
                  }]
    
This discussion has been closed.