title: How to set id on a bootstrap table column
body: <p>I have the following sample HTML:</p>
  
  <pre><code>&lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;script src="https://code.jquery.com/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.0/bootstrap-table.min.js"&gt;&lt;/script&gt;
      &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.0/bootstrap-table.min.css" rel="stylesheet" type="text/css" /&gt;
      &lt;script type="text/javascript"&gt;
          $(document).ready(function () {
              //Sample Json data
              var jsondata = [
                  {
                      "id": "1",
                      "Name": "Name1",
                      "Address": "Address1"
                  },
                  {
                      "id": "2",
                      "Name": "Name2",
                      "Address": "Address2"
                  },
                  {
                      "id": "3",
                      "Name": "Name3",
                      "Address": "Address3"
                  }];
  
              $('#table').bootstrapTable({
                  //Assigning data to table
                  data: jsondata
              });
  
             function LinkFormatter(value, row, index) {
                   return "&lt;a href='/details/"+row.id+"'&gt;"+value+"&lt;/a&gt;";
                  }
          });
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;form id="form1" runat="server"&gt;
          &lt;table id="table"&gt;
              &lt;thead&gt;
                  &lt;tr&gt;
                      &lt;th data-field="id"&gt;ID&lt;/th&gt;
                      &lt;th data-field="Name" data-formatter="LinkFormatter"&gt;Name&lt;/th&gt;
                      &lt;th data-field="Address"&gt;Address&lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
          &lt;/table&gt;
      &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I want to add an <code>href</code> to the <code>name</code> column so that when clicked I could get redirected to <code>../details/id</code>. I have added <code>linkFormatter</code>, but I am not able to set and fetch <code>id</code> on <code>name</code> column. How can this be done using Bootstrap table? I want to set <code>id</code> in so that I can use it.</p>
  
  <p>I tried separating the js file as follows:</p>
  
  <pre><code>$(document).ready(function() {
     getServices();
  
  });
  
  
  function getServices(){
    var requestBody="{}";
          $.ajax({
                  type : 'GET',
                  url :  my_url,
                  data : requestBody,
                  headers: {
                          'Content-Type':'application/json'
                  },
                  dataType : "json",
                  success : function(data) {
                          services = data;
                          fillServiceTable();
                  },
                  error: function(jqXHR, textStatus, errorThrown) {
                          displayConsoleMessages(jqXHR, textStatus, errorThrown);
                          renderErrorMessage("There was some error fetching devices.");
                  }
          });
  }
  
  function fillServiceTable(){
  $('#table').bootstrapTable({
                  //Assigning data to table
                  data: services
              });
  }
  
  function LinkFormatter(value, row, index) {
          return "&lt;a href='/details/"+row.id+"'&gt;"+value+"&lt;/a&gt;";
  </code></pre>