如何从数据表中的搜索过滤器中省略特定部分？

Question

我想从 Datatable 的搜索过滤器中省略 ul>li。当我在没有 ul 列表的情况下进行过滤时，搜索功能工作正常。但我想要 ul 列表部分，而且数据表不应包含搜索中的列表。如何在数据表搜索中省略这个ul>li？

我已经在这里添加了我的代码。

HTML:

<table  id="warranty_table">
    <thead>
        <tr>
            <th>Status</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td data-id="1" id="STS1" >
                <span data-toggle='dropdown' id='Covered_btn' aria-expanded='false'><span class='status'>Covered</span></span>
                <ul class="dropdown-menu" role="menu" style="position: absolute; top:initial; left:initial;  min-width: 110px;">
                    <li><a href="javascript:;" id="1" class="status_change">Determine issue</a></li>
                    <li><a href="javascript:;" id="2" class="status_change">Covered</a></li>    
                    <li><a href="javascript:;" id="3" class="status_change">Not covered</a></li>
                    <li><a href="javascript:;" id="4" class="status_change">Assign Vendor</a></li>
                    <li><a href="javascript:;" id="5" class="status_change">Followup with HO</a></li>
                    <li><a href="javascript:;" id="6" class="status_change">Followup with Vendor</a></li>    
                    <li><a href="javascript:;" id="7" class="status_change">Diagnose issue</a></li>
                    <li><a href="javascript:;" id="8" class="status_change">Give Vendor Authorization</a></li>
                    <li><a href="javascript:;" id="9" class="status_change">Close claim</a></li>
                </ul>
            </td>            
        </tr>
        <tr>
            <td data-id="2" id="STS2" >
                <span data-toggle='dropdown' id='Covered_btn' aria-expanded='false'><span class='status'>Assign Vendor</span></span>
                <ul class="dropdown-menu" role="menu" style="position: absolute; top:initial; left:initial;  min-width: 110px;">
                    <li><a href="javascript:;" id="1" class="status_change">Determine issue</a></li>
                    <li><a href="javascript:;" id="2" class="status_change">Covered</a></li>    
                    <li><a href="javascript:;" id="3" class="status_change">Not covered</a></li>
                    <li><a href="javascript:;" id="4" class="status_change">Assign Vendor</a></li>
                    <li><a href="javascript:;" id="5" class="status_change">Followup with HO</a></li>
                    <li><a href="javascript:;" id="6" class="status_change">Followup with Vendor</a></li>    
                    <li><a href="javascript:;" id="7" class="status_change">Diagnose issue</a></li>
                    <li><a href="javascript:;" id="8" class="status_change">Give Vendor Authorization</a></li>
                    <li><a href="javascript:;" id="9" class="status_change">Close claim</a></li>
                </ul>
            </td>
        </tr>
        <tr>
            <td data-id="36" id="STS36" >
                <span data-toggle='dropdown' id='Determine _btn' aria-expanded='false' class='btn btn-warning btn-xs dropdown-toggle status_changespan '><span class='status'>Determine issue</span><span class='caret fiveML'></span></span>
                <ul class="dropdown-menu" role="menu" style="position: absolute; top:initial; left:initial;  min-width: 110px;">
                    <li><a href="javascript:;" id="1" class="status_change">Determine issue</a></li>
                    <li><a href="javascript:;" id="2" class="status_change">Covered</a></li>    
                    <li><a href="javascript:;" id="3" class="status_change">Not covered</a></li>
                    <li><a href="javascript:;" id="4" class="status_change">Assign Vendor</a></li>
                    <li><a href="javascript:;" id="5" class="status_change">Followup with HO</a></li>
                    <li><a href="javascript:;" id="6" class="status_change">Followup with Vendor</a></li>    
                    <li><a href="javascript:;" id="7" class="status_change">Diagnose issue</a></li>
                    <li><a href="javascript:;" id="8" class="status_change">Give Vendor Authorization</a></li>
                    <li><a href="javascript:;" id="9" class="status_change">Close claim</a></li>
                </ul>
            </td>
        </tr>
    </tbody>
</table>

Javascript:

$(document).ready(function() {
$('#warranty_table').DataTable();
});

Answer 1

您可以创建自己的自定义搜索功能：

$.fn.dataTable.ext.search.push(
    function (settings, data, dataIndex) {
        var match = false;
        var input = $('#search').val().toLowerCase();
        var noOfRows = data.length;
        var rowData = '';

        rowData = table.row(dataIndex).data();

        var startIndex = rowData.toString().indexOf('<ul');
        var endIndex = rowData.toString().indexOf('</ul>') + 5;
        var strUl = rowData.toString().slice(startIndex, endIndex);

        rowData = rowData.toString().replace(strUl, '');
        rowData = $(rowData).text(); // remove HTML tags

        if (input.length == 0) {
            return true;
        } else if (rowData.toString().toLowerCase().indexOf(input) >= 0) {
            return true;
        }
        return false;
    });

此函数将获取每个 table 行的原始数据，去除 ul，然后根据更新后的字符串进行比较。

我添加了一个新的搜索输入字段，可用于覆盖默认搜索。

查看我的演示 here。希望对你有帮助。

如何从数据表中的搜索过滤器中省略特定部分？

How to omit particular section from Search filter in DataTables?

html

jquery

datatables