title: jquery dataTables - how to add an edit and delete option
body: <p>I have the following code: <a href="http://jsfiddle.net/5ooyertu/1/" rel="nofollow noreferrer">http://jsfiddle.net/5ooyertu/1/</a></p>
  <p>Right now, the table is being populated properly via the server side, and my paging works.  But I'd like to add the ability to delete and or edit a row. I would like to add a column called &quot;Actions&quot; that has two  - one to an edit method... and the other to a delete method.</p>
  <p>Prior to using dataTables, I had some JavaScript logic that would iterate through an array of records from an Ajax, call and populate a regular table with the data, and the appropriate hyper-links.</p>
  <pre><code> for (var i=0; i &lt; data.length; i++) {
    if (data[i].grp == 0) {
       tr.append(&quot;&lt;a href='add.html?id=&quot; + data[i].id + &quot;&amp;pid=&quot; + data[i].pid + &quot;&amp;destination=&quot; + data[i].destination + &quot;&amp;name=&quot; + data[i].name.replace(&quot;'&quot;, &quot;%27&quot;) + &quot;'&lt;/a&gt;&lt;button class='btn btn-xs btn-primary'&gt;Edit&lt;/button&gt;&amp;nbsp;&lt;/td&gt;&quot;);
       tr.append(&quot;&lt;button class='btn btn-xs btn-primary' onclick='delete(&quot; + data[i].id + &quot;,&quot; + data[i].pid + &quot;);'&gt;Delete&lt;/button&gt;&lt;/td&gt;&quot;)
  
   } else {
       tr.append(&quot;&lt;a href='update_group.html?id=&quot; + data[i].id + &quot;&amp;pid=&quot; + data[i].pid + &quot;&amp;destination=&quot; + data[i].destination + &quot;&amp;name=&quot; + data[i].name.replace(&quot;'&quot;, &quot;%27&quot;) + &quot;'&lt;/a&gt;&lt;button class='btn btn-xs btn-primary'&gt;Edit&lt;/button&gt;&amp;nbsp;&lt;/td&gt;&quot;);
       tr.append(&quot;&lt;button class='btn btn-xs btn-primary' onclick='delete(&quot; + data[i].id + &quot;,&quot; + data[i].pid + &quot;,true);'&gt;Delete&lt;/button&gt;&lt;/td&gt;&quot;)
    }
  }
  </code></pre>
  <p>As you can see from the above code example, in my hyperlinks, I need to pass a few pieces of data from each row, either as a part of the query string (in the case of edits) or just pass them as parameters to another JavaScript function called &quot;delete&quot; that lives in the same file as this dataTable.  And it's conditional... meaning, the hyperlinks will change depending on whether grp is true / false.</p>
  <p>I am wondering how I can change the logic that populates the dataTable to now include these two hyper-links?</p>
  <p>I found this link: <a href="http://datatables.net/forums/discussion/5862/creating-an-action-column-for-icons-view-edit-delete#" rel="nofollow noreferrer">http://datatables.net/forums/discussion/5862/creating-an-action-column-for-icons-view-edit-delete#</a> But the code didn't work for me and I think I read somewhere that the fnRender method is deprecated now.</p>
  <p>If you have any suggestions, I'd appreciate it.</p>
  <p><strong>EDIT 1</strong></p>
  <p>I tried to change my code to look like this:</p>
  <pre><code>$(document).ready(function() {
      var selected = [];
      $('#users').DataTable( {
  
          &quot;serverSide&quot;: true,
          &quot;ordering&quot;: false,
           aLengthMenu: [
                  [10, 25, 50, 100, &quot;-1&quot;],
                  [10, 25, 50, 100, &quot;All&quot;]
          ],
          &quot;ajax&quot;: &quot;/cgi-bin/test&quot;,
          &quot;rowCallback&quot;: function( row, data ) {
              if ( $.inArray(data.DT_RowId, selected) !== -1 ) {
                  $(row).addClass('selected');
              }
          },
          &quot;columns&quot;: 
          [    
                  { &quot;data&quot;: &quot;id&quot; ,&quot;searchable&quot;:false},
                  { &quot;data&quot;: &quot;name&quot;,&quot;searchable&quot;:true},    
                  { &quot;data&quot;: &quot;pid&quot;, &quot;searchable&quot;:true },    
                  { &quot;data&quot;: &quot;destination&quot;, &quot;searchable&quot;:true },
                  {&quot;mRender&quot;: function ( data, type, row ) {
                          return '&lt;a href=add.html?id=&quot;'+row[0]+'&quot;&gt;Edit&lt;/a&gt;';}
                  }
          ]
      } );
      
  } );
  </code></pre>
  <p>Notice the call reference to render. I also added a new column to my table in my html code.  I do get a hyperlink!  But unfortunately, the link is incorrect.  row[0] returns &quot;undefined&quot;.  Also, I still don't know how to change the hyperlink i create depending on the value of the field &quot;destination&quot;.
  So for example, I want to do something like this: (pseudocode)</p>
  <pre><code>if row[i].destination = 'Group' then
                      {&quot;mRender&quot;: function ( data, type, row ) {
                              return '&lt;a href=group.html?id=&quot;'+row[0]+'&quot;&gt;Edit&lt;/a&gt;';}
                      }
  else
                      {&quot;mRender&quot;: function ( data, type, row ) {
                              return '&lt;a href=add.html?id=&quot;'+row[0]+'&quot;&gt;Edit&lt;/a&gt;';}
                      }
  end
  </code></pre>
  <p><strong>EDIT 2</strong></p>
  <p>This code seems to work:</p>
  <pre><code>$(document).ready(function() {
      var selected = [];
      $('#users').DataTable( {
  
          &quot;serverSide&quot;: true,
          &quot;ordering&quot;: false,
           aLengthMenu: [
                  [10, 25, 50, 100, &quot;-1&quot;],
                  [10, 25, 50, 100, &quot;All&quot;]
          ],
          &quot;ajax&quot;: &quot;/cgi-bin/test&quot;,
          &quot;rowCallback&quot;: function( row, data ) {
              if ( $.inArray(data.DT_RowId, selected) !== -1 ) {
                  $(row).addClass('selected');
              }
          },
          &quot;columns&quot;: 
          [    
                  { &quot;data&quot;: &quot;id&quot; ,&quot;searchable&quot;:false},
                  { &quot;data&quot;: &quot;name&quot;,&quot;searchable&quot;:true},    
                  { &quot;data&quot;: &quot;pid&quot;, &quot;searchable&quot;:true },    
                  { &quot;data&quot;: &quot;destination&quot;, &quot;searchable&quot;:true },
                  {&quot;mRender&quot;: function ( data, type, row ) {
                          return '&lt;a href=add.html?id='+row.id+'&gt;Edit&lt;/a&gt;';}
                  }
          ]
     });
  </code></pre>
  <p>Now I just need to figure out how I'm going to make it conditional.</p>