title: DataTables: Add option on which script to run
body: <p>I am showing a DataTables using the below code. It is using server side processing and works ok. </p>
  
  <p>I would like to add a drop down option above the table with for example:</p>
  
  <ul>
  <li>Product Group 1</li>
  <li>Product Group 2</li>
  </ul>
  
  <p>and then based on the selected option this determines what server side processing script is run.</p>
  
  <p><strong>Existing code</strong></p>
  
  <pre><code>&lt;script type="text/javascript" charset="utf-8"&gt;
      $(document).ready(function() {
          var table = $('#table').dataTable( {
              "ajax": {
                      "url": "../server_processing/prices.php",
                      "type": "POST"
                      },
              "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
              "order": [[ 1, "asc" ]],
              "serverSide": true
          } );
  
          var tabletools = new $.fn.dataTable.TableTools( table, {
              "dom": 'T&lt;"clear"&gt;lfrtip',
              "sSwfPath": "../copy_csv_xls_pdf.swf"
          } );
  
          $( tabletools.fnContainer() ).insertBefore('div.dataTables_wrapper');
      } );
  &lt;/script&gt;
  </code></pre>
  
  <p>For example here the <code>"url": "../server_processing/prices.php",</code>would be <code>"url": "../server_processing/prices.php?ProductGroup=X",</code>.</p>
  
  <p>I'm sure something like this is simple in JavaScript/jQuery but I'm not sure how to start. I am new to both, my only experience thus far has been DataTables.</p>
  
  <p>Also how would I handle the HTML table itself as the column headers could change based on the selected product group.</p>
  
  <p><strong>Existing code</strong></p>
  
  <pre><code>  &lt;table id="table" class="table table-bordered" cellspacing="0" width="100%"&gt;
        &lt;thead&gt;
            &lt;tr&gt;
                &lt;th&gt;Price Table&lt;/th&gt;
                &lt;th&gt;Product Code&lt;/th&gt;
                &lt;th&gt;Product Description&lt;/th&gt;
            &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
        &lt;/tbody&gt;
    &lt;/table&gt;
  </code></pre>
  
  <p>this is correct for Product Group 1, but Product Group 2 might require an additional column header for example.</p>
  
  <p>I understand the easier option is to just create 2 pages and have 2 tables but I don't want that.</p>
  
  <p>I hope I've explained clearly enough, if more details are needed etc. I can help. Appreciate any help from the experts!</p>