我使用下面的代码显示了一个DataTables。它正在使用服务器端处理，工作正常。
我想在表格上方添加一个下拉选项，例如：
- 产品组1
- 产品组2
然后基于所选择的选项来确定运行什么服务器端处理脚本。
现有代码
<script type="text/javascript" charset="utf-8">
$(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<"clear">lfrtip',
"sSwfPath": "../copy_csv_xls_pdf.swf"
} );
$( tabletools.fnContainer() ).insertBefore('div.dataTables_wrapper');
} );
</script>
例如，这里的"url": "../server_processing/prices.php",将是"url": "../server_processing/prices.php?ProductGroup=X",。
我确信在JavaScript/jQuery中这样的东西很简单，但我不知道如何开始。我对这两者都是新手，到目前为止我唯一的经验是DataTables。
此外，我将如何处理HTML表本身，因为列标题可能会根据所选的产品组进行更改。
现有代码
<table id="table" class="table table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Price Table</th>
<th>Product Code</th>
<th>Product Description</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
这对于产品组1是正确的，但是产品组2可能需要一个额外的列标题。
我知道更简单的选择是只创建2个页面和2个表，但我不希望这样。
我希望我已经解释清楚了，如果需要更多的细节等，我可以帮忙。感谢专家们的帮助！
试试这个：你可以使用fnReloadAjax，如下所示HTML-
<select id="select1">
<option value="1">Product Group 1</option>
<option value="2">Product Group 2</option>
</select>
jQuery:
$(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<"clear">lfrtip',
"sSwfPath": "../copy_csv_xls_pdf.swf"
} );
$( tabletools.fnContainer() ).insertBefore('div.dataTables_wrapper');
//on change event handle for select box
$('#select1').on("change", function(){
var value = $(this).val();
table.fnReloadAjax( '../server_processing/prices.php?ProductGroup='+value );
});
} );