使用下拉列表过滤表（dataTables） [英] Using a dropdown list to filter a table (dataTables)

问题描述

我正在使用dataTables jQuery插件（这完全令人敬畏），但是我根据我的选择框的更改无法让我的表格过滤。

I'm using the dataTables jQuery plugin (which is totally awesome), but I'm having trouble getting my table to filter based on the change of my select box.

功能：

  $(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，但您可以理念。
任何人曾尝试过这样做？

Table goes on to display a bunch of items, up to "Group 6", but you get the idea. Anyone ever tried to do this before?

推荐答案

dataTables功能

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

I knew I had done this before, and you have to watch this little piece of information:

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

你需要设置{bFilter：true}，并将你的< select>< / select> 通过sDom注册的自定义元素。我可以猜测你的代码将如下所示：

you need to set {bFilter:true}, and move your <select></select> into a custom element registered through sDom. I can guess your code will look like this:

$(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}; 根据文档

your code for oTable.fnFilter( $(this).val() ); will not fire while {bFilter:false}; according to the documentation

这篇关于使用下拉列表过滤表（dataTables）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！