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

Я показываю DataTables, используя приведенный ниже код. Он использует обработку на стороне сервера и работает нормально.

Я хотел бы добавить опцию drop down над таблицей, например:

  • Группа продуктов 1
  • Группа продуктов 2

а затем на основе выбранного параметра определяет, какой сценарий обработки на стороне сервера запущен.

Существующий код

Например, здесь "url": "../server_processing/prices.php", будет "url": "../server_processing/prices.php?ProductGroup=X",

Я уверен, что что-то вроде этого просто в JavaScript/jQuery, но я не уверен, с чего начать. Я новичок в обоих, мой единственный опыт до сих пор был DataTables.

Также как я буду обрабатывать HTML-таблицу, поскольку заголовки столбцов могут меняться в зависимости от выбранной группы продуктов.

Существующий код

<table id="table" cellspacing="0">
 <thead>
 <tr>
 <th>Price Table</th>
 <th>Product Code</th>
 <th>Product Description</th>
 </tr>
 </thead>
 <tbody>
 </tbody>
 </table>

это правильно для группы продуктов 1, но для группы продуктов 2 может потребоваться, например, дополнительный заголовок столбца.

Я понимаю, что более простой вариант - просто создать 2 страницы и иметь 2 таблицы, но я этого не хочу.

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

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 );
 });
 } );

licensed under cc by-sa 3.0 with attribution.