title: How to create hyperlink or clickable cell inside a Bootstrap DataTable?
body: <p>I have a sample json file with data:</p>
  
  <pre><code>"data" : [ 
      {
          "id": 1,
          "firstName": "Fred",
          "lastName": "Flintstone",
          "userName": "fredf"
      }, {
          "id": 3,
          "firstName": "Barney",
          "lastName": "Ruble",
          "userName": "barneyr"
      }, {
          "id": 2,
          "firstName": "Wilma",
          "lastName": "Flintstone",
          "userName": "wilmaf"
      }, {
          "id": 4,
          "firstName": "Barney",
          "lastName": "Ruble",
          "userName": "bettyr"
      },.....
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="panel-body"&gt;
      &lt;div class="table-responsive"&gt;
          &lt;table class="table table-striped table-bordered table-hover" id="user-table"&gt;
      &lt;thead&gt;
              &lt;tr data-href="/runbook"&gt;
                                                          &lt;th&gt;#&lt;/th&gt;
                                                          &lt;th&gt;Title&lt;/th&gt;
                                                          &lt;th&gt;Author&lt;/th&gt;
                                                          &lt;th&gt;Date Created&lt;/th&gt;
                                                      &lt;/tr&gt;
                                                  &lt;/thead&gt;
                                                  &lt;tbody&gt;
  
                                                  &lt;/tbody&gt;
                                              &lt;/table&gt;
                                          &lt;/div&gt;
                                          &lt;!-- /.table-responsive --&gt;
                                      &lt;/div&gt;
                                      &lt;!-- /.panel-body --&gt;
  </code></pre>
  
  <p>JavaScript:</p>
  
  <pre><code>$(document).ready(function() {
      $('#user-table').dataTable({
          &lt;!-- Retrieve a static json file, you could also have a URL to a controller method. --&gt;
          "sAjaxSource" : "/resources/sample.json",
          &lt;!-- Indicate to dataTable what the field names are we want, in the order we want them in the table. --&gt;
          "aoColumns": [
                    {"data":"id"},
                    {"data": "firstName"},
                    {"data":"lastName"},
                    {"data":"userName"}
          ]
      });
  });
  </code></pre>
  
  <p>This populates a table successfully. What I want is to have the firstName column (title) to be a clickable cell, or link. It can redirect to a page <code>/page/(id)</code>. I'd like this particular cell to LOOK different from the rest of the data -- like a link or clickable cell.</p>
  
  <p>Thanks.</p>