Использование выпадающего списка для фильтрации таблицы (dataTables)

Я использую подключаемый модуль jQuery dataTables (который совершенно потрясающий), но у меня возникают проблемы с фильтрацией моей таблицы на основе изменения моего поля выбора.

Функция:

  $(document).ready(function() {
      $("#msds-table").dataTable({
        "sPaginationType": "full_numbers",
        "bFilter": false
       });

      var oTable;
      oTable = $('#msds-table').dataTable();

      $('#msds-select').change( function() { 
            oTable.fnFilter( $(this).val() ); 
       });
   });

HTML:

  <table border="0" cellpadding="0" cellspacing="0" id="msds-table">
                    <thead>
                      <tr>
                        <th>Column 1</th>
                        <th>Column 2</th>
                        <th>etc</th>
                      </tr>
                    </thead>
                    <tbody>
                    <select id="#msds-select">
                    <option>All</option>
                    <option>Group 1</option>
                    <option>Group 2</option>
                    <option>Group 3</option>
                    <option>Group 4</option>
                    <option>Group 5</option>
                    <option>Group 6</option>
                    </select>
                    <tr class="odd">
                        <td>Group 1</td>
                        <td><img src="images/modules/download-icon.gif" width="12" height="17" alt="" /></td>
                        <td><a href="#">Download</a></td>
                    </tr>
                    <tr class="even">
                        <td>Group 1</td>
                        <td><img src="images/modules/download-icon.gif" width="12" height="17" alt="" /></td>
                        <td><a href="#">Download</a></td>
                    </tr>
                    <tr class="odd">
                        <td>Group 1</td>
                        <td><img src="images/modules/download-icon.gif" width="12" height="17" alt="" /></td>
                        <td><a href="#">Download</a></td>
                    </tr>
     </tbody>
 </table>

Таблица продолжает отображать кучу элементов, вплоть до «Группы 6», но вы поняли идею. Кто-нибудь когда-нибудь пытался сделать это раньше?


drop-down-menu filter jquery datatables
person collin    schedule 12.08.2011    source источник
comment
Не могли бы вы дать нам немного больше информации о вашей реальной проблеме? Или не могли бы вы опубликовать код того, что вы пытались сделать, и что у вас не работает?   -  person Chris    schedule 13.08.2011
comment
Ключ возврата не работает. Обновлено с кодом.   -  person collin    schedule 13.08.2011
comment
Мне потребовалось около недели, чтобы заставить это работать на меня. Хотел бы я, чтобы у меня все еще был доступ к источнику, который я использовал. По сути, в исходном коде для него была проблема, которую мне пришлось зайти и изменить. К сожалению, веб-сайт для таблиц данных не был слишком описательным, когда речь шла об этой функциональности. Я бы проверил их форумы, я писал об этом несколько раз там.   -  person Chad La Guardia    schedule 13.08.2011

Ответы (2)


arrow_upward
11
arrow_downward

функции dataTables

Я знал, что делал это раньше, и вы должны посмотреть этот небольшой фрагмент информации:

Обратите внимание, что если вы хотите использовать фильтрацию в DataTables, это должно оставаться «true» — чтобы удалить поле ввода фильтрации по умолчанию и сохранить возможности фильтрации, используйте сДом.

вам нужно установить {bFilter:true} и переместить <select></select> в пользовательский элемент, зарегистрированный через sDom. Я могу предположить, что ваш код будет выглядеть так:

$(document).ready(function() {
      $("#msds-table").dataTable({
        "sPaginationType": "full_numbers",
        "bFilter": true,
        "sDom":"lrtip" // default is lfrtip, where the f is the filter
       });
      var oTable;
      oTable = $('#msds-table').dataTable();

      $('#msds-select').change( function() { 
            oTable.fnFilter( $(this).val() ); 
       });
   });

ваш код для oTable.fnFilter( $(this).val() ); не сработает, пока {bFilter:false}; согласно документации

person DefyGravity    schedule 12.08.2011
comment
Ах, фильтр имеет смысл, но я все еще не могу заставить его сработать; Это должно быть что-то с sDom нет? Документацию по нему не очистить. - person collin; 13.08.2011
comment
Ладно, просто почитай про сДом. Ваш код должен полностью работать! Но без кубиков. Единственная другая вещь, о которой я могу думать, это где в HTML находится ‹select›? - person collin; 13.08.2011
comment
Вау, только что посмотрел на мой select id=#msds-select... Я приписываю это жареному мозгу в пятницу вечером. Спасибо за вашу помощь, приветствия. - person collin; 15.08.2011
comment
Рад, что смог помочь ;) . этот лакомый кусочек фильтрации поймал меня в первый раз, и отстой, чтобы найти. - person DefyGravity; 15.08.2011

arrow_upward
-1
arrow_downward

Используйте этот код:

 $('.btn-success').on('click',function (e) {
               //to prevent the form from submitting use e.preventDefault()
                e.preventDefault();
                var res = $("#userid").val();  
                var  sNewSource = "<?php echo base_url(); ?>myaccount/MyData_select?userid=" + res + "";
                var oSettings = ETable.fnSettings();
                oSettings.sAjaxSource  = sNewSource;
                ETable.fnDraw();
            });
person Sapna    schedule 25.10.2018