title: Return DataTable row values onClick
body: <p>I have been studying and working endlessly with DataTables the past 2 weeks and gotten to a brick wall now. The issue I am trying to sort out is how I can pass values in a particular row when the button for that row is clicked on. As at now with my limited knowledge on DataTables and JQuery, when I have like 2 to 3 buttons in different rows and I click on each one, the value they all return back is the values in the first row only. Not sure how best I can solve this or where my error might lie. Any guide or help would be much appreciated. Thanks</p>
  
  <pre><code>&lt;script type="text/javascript" charset="utf-8"&gt;
  
  &lt;!-- ------------------- Extract all Alerts ---------------------- --&gt;
      $(document).ready(function (){
          var alertTable = $('#alert-table').DataTable({
              "jQueryUI": true,
              "columns": [
                  { "data": "source", "visible": false },
                  { "data": "host" },
                  { "data": "description" },
                  { "data": "priority" },
                  { "data": "acknowledged", render: function( data, type, row ) {
                      if (data == "0" &amp;&amp; row.priority &gt; "2") {return '&lt;div&gt;&lt;form method="post" id="'+row.source + row.eventid+'" action="include/db_conn.php"&gt; &lt;input type="hidden"  id="evtid" value ="'+row.eventid+'"&gt; &lt;input type="hidden"  name="source" value ="'+row.source+'"&gt; &lt;INPUT TYPE="text" name="username" size="3" maxlength="3"&gt; &lt;input type="submit" name="'+row.source + row.eventid+'" onClick="ackbutton(this)" value="Ack Alert"&gt;&lt;/form&gt;&lt;/div&gt;';
                      } return data;
                      }
                  }
              ],
          });
  
          setInterval (function(){
              $.getJSON("data/json_data.txt", function (pcheckdata){
  
                  alertTable.clear().draw();
                  alertTable.rows.add(pcheckdata.alert).draw();
                  alertTable.columns.adjust().draw();
              });
          }, 10000);
      });
  
          function ackbutton() {
              //e.preventDefault();
              var $this = $(this);
              var getvalues = $('#evtid').val();
              alert(getvalues);
          }
  &lt;/script&gt;
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;body&gt;
      &lt;div class="all_tables"&gt;
          &lt;table id="alert-table" class="display" cellspacing="0"&gt;
              &lt;thead class="t-headers"&gt;
                  &lt;tr&gt;
                      &lt;th&gt;Server&lt;/th&gt;
                      &lt;th&gt;Host&lt;/th&gt;
                      &lt;th&gt;Description&lt;/th&gt;
                      &lt;th&gt;Priority&lt;/th&gt;
                      &lt;th&gt;Acknowledged&lt;/th&gt;
                      &lt;th&gt;Eventid&lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
          &lt;/table&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>JSON</p>
  
  <pre><code>{
      "alert": [
          {
              "source": "Server1",
              "host": "host1",
              "description": "Engine Alive",
              "priority": "4",
              "triggerid": "14531",
              "acknowledged": "0",
              "eventid": "3419709",
              "value": "1"
          },
          {
              "source": "Server2",
              "host": "host2",
              "description": "webapp down",
              "priority": "2",
              "triggerid": "18027",
              "acknowledged": "1",
              "eventid": "4012210",
              "value": "1"
          }
      ],
  
      "error": []
  }
  </code></pre>