title: Jquery Datatables populate after form post
body: <p>I'm trying to do a form submit (POST) with some parameters and based on the parameters I want to populate my datatable. But I'm not very good with Javascript (My language is Java), so I'm trying to do it with an Ajax call. But it won't work for me. Everything works for me, except doing a POST with parameters to the servlet. The datatable always populate automatically, but it should populate after the form submit.</p>
  
  <p>Does someone know an example of my case? I read a lot of form posts here and tutorials, but none of this case (?).</p>
  
  <p>My code is now as follows, this works for me. Except I can't sort or search anymore in this table. What is missing?</p>
  
  <p>Thank you.</p>
  
  <pre><code>&lt;script type="text/javascript" language="javascript" src="/global/js/jquery-1.9.1.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" language="javascript" src="/global/js/jquery.dataTables.min.js"&gt;&lt;/script&gt;
  
  &lt;form name="myform" id="myform" action="" method="POST"&gt;  
    &lt;label for="season"&gt;Season:&lt;/label&gt;  
    &lt;input type="text" name="season" id="season" value=""/&gt; &lt;br /&gt;
    &lt;label for="type"&gt;Type:&lt;/label&gt;  
    &lt;input type="text" name="type" id="type" value=""/&gt; &lt;br/&gt;
    &lt;input type="button" id="btnSubmit" name="btnSubmit" value="Search"&gt; 
  &lt;/form&gt;
  
  &lt;table class="display" id="example"&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;Name&lt;/th&gt;
        &lt;th&gt;NationId&lt;/th&gt;
        &lt;th&gt;RegionId&lt;/th&gt;
        &lt;th&gt;Attendance&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;!-- data goes here --&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  
  &lt;script&gt;
    $("#btnSubmit").click( function() {
      var formData = "season=" + $("input#season").val() + "&amp;type=" + $("input#type").val();
      $('#example').dataTable( {
        "bJQueryUI": true,
        "bProcessing": true,
        "bDestroy": true,
        "sAjaxSource": "/servlets/service/competitions/",
        "fnServerData": function ( sSource, aoData, fnCallback, oSettings ) {
          oSettings.jqXHR = ${esc.d}.ajax( {
            "dataType": 'json',
            "type": "POST",
            "url": sSource,
            "data": formData,
            "success": fnCallback
            } );
        }
      } );
    } );
  &lt;/script&gt;
  </code></pre>