How to hyperlink only one column in a table using JQuery

Question

JQUERY

{   
$(document).ready(function() {
   $("#search_btn").click(function() {
var _empID = document.getElementById('search').value;
$.ajax({
  url: 'coinsIndentsServlet?empid=' + _empID,
  type: 'GET',
  dataType: 'json',
  timeout: 2500,
  "columns": [{
    "data": "INDENTNO",
    "render": function(data, type, row, meta) {
      return '<a href="Angularhtml.html?INDENTNO=' + data + '">' + data + '</a>';
    }
  }],
  success: function(response) {
    $('#table').bootstrapTable('load', response.indents);
    $('#tabledata').bootstrapTable('load', response.egps);
  }
  });
  });
  });
}

TABLE

{
  <div class="container">
        <span style="float: top; font-family: cursive ;background-color: powderblue;"><h4><b><I>COINS 
    INDENT DETAILS</i></b></h4></span>
        <table  id ="table" data-toggle="table"
                data-pagination="true"  class="table
                table-striped
                table-bordered
                table-hover
                display" >

            <thead>
                <tr >

                    <th data-field="INDENTNO"><b>INDENT NO</b></th>
                    <th data-field="INDENTSHORTDES"><b>INDENT DESCRIPTION</b></th>
                    <th data-field="INDENTDATE"><b>INDENT DATE</b></th>
                    <th data-field="REGSTATUS"><b>STATUS</b></th>
                </tr>
            </thead>
        </table>
    </div>
}

Here i want one column that is INDENT NO to be hyperlinked, i have the above code but it is not working. here i am using material design bootstrap and JQueryH. Can anyone suggest how to hyperlink only one column in a TABLE.

Answer 1

What you have is below, you're setting columns render option inside ajax options, which is not going to do anything, this should be inside option of response of column properties.

$.ajax({
  url: 'coinsIndentsServlet?empid=' + _empID,
  type: 'GET',
  dataType: 'json',
  timeout: 2500,
  "columns": [{
    "data": "INDENTNO",
    "render": function(data, type, row, meta) {
      return '<a href="Angularhtml.html?INDENTNO=' + data + '">' + data + '</a>';
    }
  }],
  success: function(response) {
    $('#table').bootstrapTable('load', response.indents);
    $('#tabledata').bootstrapTable('load', response.egps);
  }
  });

Below one is generic syntax for column render/formatter

<th data-field="INDENTNO" data-formatter="somefunction"><b>INDENT NO</b></th>

in script

 function somefunction(index, row) {
    /* create hypherlink here as per  your need*/
    return index + '. Item ID: ' + row.id
  }

Reference: https://live.bootstrap-table.com/example/column-options/formatter.html#view-source

Example: https://live.bootstrap-table.com/example/column-options/formatter.html