title: How can I add custom urls to datatables
body: <p>I went from using thymeleaf tables to using datatables in my code. I have been trying to find a way to add a button into the tables row so that it is relational to the id of that row. For example in thymeleaf I use</p>
  
  <pre><code>&lt;a th:href="@{'/flash/' + ${flash.flashcard_id}}"&gt;&lt;button title="View" data-toggle="tooltip"&gt;&amp;#xE417;&lt;/button&gt;&lt;/a&gt;
  </code></pre>
  
  <p>But I am not sure how to achieve this in datatables.</p>
  
  <p>I have tried to use</p>
  
  <pre><code>{ "mData": "&lt;button&gt;Test&lt;/button&gt;"}
  </code></pre>
  
  <p>and</p>
  
  <pre><code>{ "mData": null, "bSortable": false, "mRender": function (o) { return '&lt;a href=#/' + o.flashcard_id+ '&gt;' + 'View' + '&lt;/a&gt;'; }}
  </code></pre>
  
  <p>but I am probably not using them correctly as I don't know much about datatables.</p>
  
  <p>Previous Thymeleaf Code</p>
  
  <pre><code>&lt;table class="table table-striped"&gt;
        &lt;tr&gt;
          &lt;th&gt;Jobname&lt;/th&gt;
          &lt;th&gt;Flashcard Name&lt;/th&gt;
          &lt;th&gt;Barcode Value&lt;/th&gt;
          &lt;th&gt;Display Text&lt;/th&gt;
          &lt;th&gt;Active&lt;/th&gt;
          &lt;th&gt;Actions&lt;/th&gt;
        &lt;/tr&gt;
        &lt;tr th:each="flash : ${flash}"&gt;
          &lt;td th:text="${flash.jobName}"&gt;&lt;/td&gt;
          &lt;td th:text="${flash.flashcard_Name}"&gt;&lt;/td&gt;
          &lt;td th:text="${flash.barcode_Value}"&gt;&lt;/td&gt;
          &lt;td th:text="${flash.display_Text}"&gt;&lt;/td&gt;
          &lt;td th:text="${flash.active}"&gt;&lt;/td&gt;
          &lt;td&gt;
              &lt;a th:href="@{'/flash/' + ${flash.flashcard_id}}"&gt;&lt;button title="View" data-toggle="tooltip"&gt;&amp;#xE417;&lt;/button&gt;&lt;/a&gt;
              &lt;a th:href="@{'/flash/' + ${flash.flashcard_id}} + '/update'"&gt;&lt;button title="Update" data-toggle="tooltip"&gt;&amp;#xE417;&lt;/button&gt;&lt;/a&gt;
              &lt;a th:href="@{'/flash/' + ${flash.flashcard_id}} + '/deactivate'"&gt;&lt;button title="Deactivate" data-toggle="tooltip"&gt;&amp;#xE417;&lt;/button&gt;&lt;/a&gt;
              &lt;a th:href="@{'/flash/' + ${flash.flashcard_id}} + '/activate'"&gt;&lt;button title="Activate" data-toggle="tooltip"&gt;&amp;#xE417;&lt;/button&gt;&lt;/a&gt;        
              &lt;a th:href="@{'/flash/' + ${flash.flashcard_id}} + '/delete'"&gt;&lt;button title="Delete" data-toggle="tooltip"&gt;&amp;#xE417;&lt;/button&gt;&lt;/a&gt;      
          &lt;/td&gt;
        &lt;/tr&gt;
      &lt;/table&gt;
  </code></pre>
  
  <p>Current Datatables code</p>
  
  <pre><code>&lt;table id="flashTable" class="display"&gt;
       &lt;thead&gt;
           &lt;tr&gt;
              &lt;th&gt;Jobname&lt;/th&gt;
              &lt;th&gt;Flashcard&lt;/th&gt;
              &lt;th&gt;Barcode&lt;/th&gt;
              &lt;th&gt;Display&lt;/th&gt;
              &lt;th&gt;Active&lt;/th&gt;
              &lt;th&gt;Actions&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
  &lt;/table&gt;
  
  &lt;script&gt;
        $(document).ready( function () {
               var table = $('#flashTable').DataTable({
                      "sAjaxSource": "/flashs",
                      "sAjaxDataProp": "",
                      "aoColumns": [
                          { "mData": "jobName"},
                          { "mData": "flashcard_Name" },
                          { "mData": "barcode_Value" },
                          { "mData": "display_Text" },
                          { "mData": "active" },
                          { "mData": "&lt;button&gt;Test&lt;/button&gt;"}
                      ]
               })
          });
  &lt;/script&gt;
  </code></pre>
  
  <p>I would am looking for a way to combine both the id of the flashcard and part of url to go to different places of the site when the respective button is pressed. It works fine in thymeleaf just not sure how to translate it to datatables. Any help would be great.</p>