Javascript DataTables按钮从数据html属性筛选

我将DataTables插件用于具有动态信息的bootstrap 4表（）。我从不同的API获取信息，构建一个对象并附加到表中

一切正常，但我希望能够在表中未显示给用户的内容上创建一些过滤器按钮

我有一些列可以用来排序/搜索（默认数据表），但我希望能够从数据区域和数据子区域HTML属性中进行筛选。我读过DataTables插件中的数据搜索，但由于我需要不止一个过滤器（正如我所说的，from-region&-subsection将是一个开始，但可能会扩展），这对我来说并不是真正有用的

我的想法是创建一个下拉菜单（用于外观目的）并将按钮链接到过滤器。过滤器将检查按下了什么按钮（按钮文本），并基于它过滤整个表（类似于搜索，但用于数据html属性）

我一整天都在尝试搜索类似的东西，但什么也没找到……希望这里有人用过这样的数据表，并能给我一个如何做的提示

---

提前谢谢。

我还没有找到任何方法，所以我放弃了。我用以前存储在“data”属性中的信息创建了一些新列。我隐藏了这些列，并使用api的表引用

table.columns(colnumber).search('text').draw()

---

不太好看，但它可以工作，所以我不会浪费更多的时间来寻找不同的方法。

作为JQuery&DataTables插件，可能有一种更优雅的方法来实现这一点，但这很简单，也很有效

以下是表格的HTML：

<table style="width:100%;border-collapse:collapse;border:solid 1px black;">
        <thead>
            <tr>
                <th>Column 1</th>
                <th>Column 2</th>
            </tr>
        </thead>
        <tbody>
            <tr data-region="1" data-subregion="a">
                <td>Region 1</td>
                <td>Sub-Region A</td>
            </tr>
            <tr data-region="1" data-subregion="b">
                <td>Region 1</td>
                <td>Sub-Region B</td>
            </tr>
            <tr data-region="2" data-subregion="a">
                <td>Region 2</td>
                <td>Sub-Region A</td>
            </tr>
            <tr data-region="2" data-subregion="b">
                <td>Region 2</td>
                <td>Sub-Region B</td>
            </tr>
            <tr data-region="2" data-subregion="c">
                <td>Region 2</td>
                <td>Sub-Region C</td>
            </tr>
            <tr data-region="3" data-subregion="a">
                <td>Region 3</td>
                <td>Sub-Region A</td>
            </tr>
        </tbody>
    </table>

---

这是一个简单的下拉列表过滤器。您可以将搜索框替换为您自己的自定义搜索框，以您希望的方式进行搜索。如果不想，您根本不必让数据表绘制其搜索框。这只是绕过数据表限制的一种方法。

在

从引导复制任何下拉列表

创建一个javascript函数，用于从引导返回下拉html，请参见以下内容：

---

当前的DateTables API似乎只有2个过滤器选项；两者都不能按您的要求执行搜索。您可以将HTML注入到生成的DataTables HTML中，然后该HTML可以执行您的过滤器，或者您可以修改搜索框的行为，在搜索框生成并可供DOM使用后，将您自己的事件附加到搜索框。我用这个方法将我自己选择的下拉过滤器添加到生成的数据表中。通过注入HTML，你的意思是添加新的表列，其中包含每个项目或其他项目所需的信息？数据区域、数据子区域等已经在html中（更确切地说，它们是每个项目标题中的数据属性）。修改行为部分是我需要的，但我不知道从哪里开始。我检查了他们的文档，过去的堆栈问题，但我真的不知道怎么做。你能分享一下你是如何进行下拉过滤的吗？谢谢。DataTables api将元素添加到表中，用于搜索和分页以及您实现的任何其他选项。我的意思是，一旦api生成HTML，您就可以使用JavaScript识别这些元素和容器，并使用自定义功能将您自己的HTML注入其中。例如：在DataTables网站的登录页（您的链接）上，他们有一个示例。检查元素，你可以找到诸如“dataTables_wrapper”和“dataTables filter”之类的类名。使用JavaScript、document.querySelector（'.dataTables_wrapper'），你可以在任何你喜欢的地方添加HTML。我已经说过，信息是在HTML中的，例如（不是真实的）我感谢你花时间编写所有这些，但这绝对不是我想要的。我对页面进行了分页，这也不是DataTables搜索，而是在jquery中显示/隐藏。在询问之前我已经试过了，但是这种方法有几个问题->1-Hide/Show将中断分页（您可能有少于X个项目的页面，因为它们是隐藏的，并且DataTables似乎没有检查隐藏行）2-隐藏/显示不使用DataTables api进行搜索和/或其他功能，因此它毫无用处。“这种方法最好不用DT。”DanteR说。我解释说这是一个简单的方法示例。由您决定如何按照您希望的方式实现搜索。如果你不喜欢这种方法或者不理解它，那没关系。

$(document).ready(function(){

        // Execute the DataTables API on the table(s)
        $('table').DataTable();

        // give the DataTables API a moment to finish drawing elements to the DOM
        setTimeout(function(){
            // Just adding some Dropdown lists, but you can add a custom search box
            // this first one filters by the data-region attribute
            var regionFilter = $('<select data-filter="region">'
                + '<option value="0">All Regions</option>'
                + '<option value="1">Region 1</option>'
                + '<option value="2">Region 2</option>' 
                + '<option value="3">Region 3</option>' 
                + '</select>');
            // this second one filters by the data-subregion attribute
            var subregionFilter = $('<select data-filter="subregion">'
                + '<option value="0">All Sub-Regions</option>'
                + '<option value="a">Sub-Region A</option>'
                + '<option value="b">Sub-Region B</option>' 
                + '<option value="c">Sub-Region C</option>' 
                + '</select>');
            // prepend the dropdown lists into the dataTables_filter container
            // optionally, you can overwrite the default search box that the DataTables API places here
            $('.dataTables_filter').prepend(regionFilter);
            $('.dataTables_filter').prepend(subregionFilter);
            // give your own HTML a moment to draw to the DOM
            setTimeout(function(){
                // configure the selection to trigger the filter action
                $('select[data-filter]').on('change', function(){
                    // the <select> element has a data-filter attribute which defines which attribute to search the table for
                    var dataFilter = $(this).attr('data-filter');
                    var keyword = $('select[data-filter="' + dataFilter + '"] option:selected').val();
                    // execute the search
                    searchDataAttributes(dataFilter, keyword);
                });
            }, 300);
        }, 400);

    });

// This search is very simple - you can implement any type of search you like
    function searchDataAttributes(attribute, keyword) {
        // put together the attribute to search
        var dataAttribute = 'data-' + attribute;
        // the value 0 is being used to show all
        if (keyword=='0') {
            $('tbody tr').show();
            return true;
        }
        // if the keyword is not 0, then look at the attributes of each row in the table
        $('tbody tr').each(function(){
            var attributeValue = $(this).attr(dataAttribute);
            // if the value of the attribute in the row matches the value of the keyword, then show the row
            if (attributeValue==keyword) {
                console.log('show');
                $(this).show();
            } else {
                console.log('hide');
                $(this).hide();
            }
        });
    }

function SearchHtml(){
        return '<div class="position-relative">' + 
  '<button class="btn btn-block btn-soft-secondary dropdown-toggle" href="javascript:;" role="button"' + 
       'aria-haspopup="true"' + 
       'aria-expanded="false"' + 
       'data-unfold-event="click' + "
       'data-unfold-target="#filter3Dropdown"' + 
       'data-unfold-type="css-animation"' + 
       'data-unfold-duration="300"' + 
       'data-unfold-delay="300"' + 
       'data-unfold-animation-in="slidefadeIn"' + 
       'data-unfold-animation-out="fadeOut">' + 
        '<span class="fas fa-sliders-h dropdown-item-icon"></span>' + 
        'Refine' + 
  '</button>' + 
  '<div id="filter3Dropdown" class="dropdown-menu dropdown-unfold dropdown-menu-sm-right dropdown-menu-size-lg p-5" aria-labelledby="filter3DropdownInvoker">' + 
      '<div class="row">' + 
          '<div class="col-md-12">' + 
             '<!-- create your html refine search parameters here -->' + 
          '</div>' + 
      '</div>' + 
  '</div>' + 
'</div>';
    }

    buttons: [
                {
                    text: SearchHtml(),   
                    className: 'btn-sm btn-rounded p-0 border-primary'
                }
            ]