DataTables: Добавить параметр, на котором запускается скрипт

Question

Я показываю 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 таблицы, но я не хочу этого.

Надеюсь, что я объяснил достаточно ясно, если вам нужны детали и т. Д. Я могу помочь. Цените любую помощь от экспертов!

Answer 1

Попробуйте это: Вы можете использовать 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); 
     }); 
    });