title: Jquery DataTables and how to aoData.push data on select/input change in form
body: <p>I have a form to filter out data in a table. But I'm having some questions in how to pass that  data to DataTables and how to refresh the table on any of the select or input change.</p>
  
  <p>Here is the part of the code:</p>
  
  <pre><code>function renderDataTable(selector) {
      var out = [];
      var tables = jQuery(selector);
      var sorting;
  
      for ( var i=0, iLen=tables.length ; i&lt;iLen ; i++ ){
          var defaultCol = jQuery('th', tables[i]).index(jQuery(".dataTable-defaultSort",tables[i]));
          if(defaultCol &gt;= 0){
              sorting = [ defaultCol, 'desc' ];
          }else{
              sorting = [12,'desc'];
          }
  
          var oTable2 = jQuery(tables[i]).dataTable({
              "sDom": 'T&lt;"clearfix"&gt;lfrt&lt;"clearfix"&gt;ip',
              "aaSorting": [ sorting ],
              "bStateSave": true,
              "bProcessing": true,
              "bServerSide": true,
              "sAjaxSource": "list.php",
              "iDisplayLength": 20,
              "aLengthMenu": [[20, 50, 100], [20, 50, 100]],
              "sPaginationType": "full_numbers",
          });             
  
          out.push( oTable2 );
  
      }
      return out;
  }
  
  $(document).ready(function() {
      renderDataTable("#main_table");
  
      $("select#myVar").change(function () {
          var myVar = $(this).val();      
          // push data to table and refresh?
      });
  
  });
  </code></pre>
  
  <p>Can anyone help me out here please? Thanx in advance.</p>