使用下拉列表过滤表（dataTables）答案

【问题标题】：Using a dropdown list to filter a table (dataTables)使用下拉列表过滤表（dataTables）
【发布时间】：2011-10-26 03:42:59
【问题描述】：

我正在使用 dataTables jQuery 插件（非常棒），但是我无法根据我的选择框的变化来过滤我的表格。

功能：

  $(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 组”，但你明白了。以前有人尝试过吗？

【问题讨论】：

你能告诉我们更多关于你的实际问题的信息吗？或者您可以发布一些您尝试过的代码以及不适合您的代码吗？
返回键失败。更新了代码。
我花了大约一周的时间才让这对我有用。我希望我仍然可以访问我使用的源。从根本上说，它的源代码存在问题，我必须进行更改。不幸的是，当涉及到这个功能时，数据表的网站并没有太多描述性。我会查看他们的论坛，我在那里发布了几次。

标签： jquery filter drop-down-menu datatables

【解决方案1】：

使用此代码：

 $('.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();
            });

【讨论】：

【解决方案2】：

   $.extend( true, $.fn.dataTable.defaults, {
            "bFilter": true,
                initComplete: function () {
                    this.api().column(1).every( function () {
                        var column = this;
                        var select = $('<select><option value="">All Subjects</option></select>')
                            .appendTo( $(column.header()).empty() )
                            .on( 'change', function () {
                                var val = $.fn.dataTable.util.escapeRegex($(this).val());
                                column
                                    .search( val ? '^'+val+'$' : '', true, false )
                                    .draw();
                            } );
                        column.data().unique().sort().each( function ( d, j ) {
                            select.append( '<option value="'+d+'">'+d+'</option>' )
                        } );
                    } );
                },
        } );

【讨论】：

【解决方案3】：

dataTables features

我知道我以前做过，你必须看这个小信息：

请注意，如果您希望在 DataTables 中使用过滤，则必须保留 'true' - 删除默认过滤输入框并保留过滤能力，请使用 sDom.

您需要设置 {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}; 时触发

【讨论】：

啊，过滤器是有道理的，但我仍然无法启动它；一定和sDom有关吗？关于它的文档不明确。
好的，请阅读 sDom。您的代码应该完全可以工作！虽然没有骰子。我能想到的唯一另一件事是
哇，刚刚看了我的选择 id=#msds-select...我将其归因于周五晚上的油炸大脑。谢谢你的帮助，干杯。
很高兴我能帮上忙；）。那个过滤花絮第一次就抓住了我，而且很难找到。