title: Update datatables (JQuery) when button is clicked
body: <p>I've created a simple form and I'm using the Datatables jQuery plugin to display some data in it. Data are being populated by a php script (process.php) which returns the proper results in JSON format. In the form, there is a button that sends the value of the textbox to the process.php. <strong>The problem is that I cannot update/alter datatable with the new data received by process.php script when the button is clicked</strong>.</p>
  
  <p>The code of the form:</p>
  
  <pre><code>&lt;form name="myform" id="myform" action="" method="POST"&gt;  
      &lt;label for="id"&gt;Enter an id:&lt;/label&gt;  
      &lt;input type="text" name="txtId" id="txtId" value=""/&gt; 
      &lt;input type="button" id="btnSubmit" name="btnSubmit" value="Search"&gt; 
  &lt;/form&gt;
  
  &lt;div id="results"&gt;
      &lt;table class="display" id="example"&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th&gt;id&lt;/th&gt;
                  &lt;th&gt;Surname&lt;/th&gt;
                  &lt;th&gt;Name&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
              &lt;!-- data goes here --&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/div&gt; 
  </code></pre>
  
  <p>To create the datatable, I'm using the following JQuery code:</p>
  
  <pre><code>    $(document).ready(function() {
              var oTable = $('#example').dataTable( {
                  "sPaginationType": "full_numbers",
                  "iDisplayLength": 10,
                  //"bServerSide": true,
                  "sAjaxSource": "process.php"
              } );
  
          $("#btnSubmit").click(function(){
              $.ajax({  
                  type: "POST",  
                  url: "process.php",  
                  data: 'txtId=' + $("txtId").val(),  
                  success: function(result) {  
                      oTable.fnReloadAjax();
                      oTable.fnDraw();
                  }  
              });
          });
      } );
  </code></pre>
  
  <p>process.php script (works fine) is:</p>
  
  <pre><code>&lt;?php
  $result="";
  if (empty($_REQUEST["txtId"])) {    
      $result = '{"aaData":[["1","Surname1","Name1"]]}';
  }
  else {
      $result = '{"aaData":[["2","Surname2","Name2"]]}';
  }
  print $result;
  ?&gt;
  </code></pre>