javascript - 如何使用自定义搜索输入和下拉菜单过滤数据表

Question

我正在使用 Datatable 在我的应用程序中填充表格，但搜索过滤器不起作用。

过滤代码

<script type="text/javascript">
        $(document).ready(function () {
            $('select.healthPlanSelect').change(function () {
                var input = document.getElementById('HealthPlans');
                console.log(input);
                var filter = input.value;
                console.log(filter);
                var table = document.getElementById('userAccountDetails');
                var tr = table.getElementsByTagName('tr');
                for (i = 0; i < tr.length; i++) {
                    var td = tr[i].getElementsByTagName('td')[0];
                    if (td) {
                        if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
                            tr[i].style.display = "none";
                        } else {
                            tr[i].style.display = "";
                        }
                    }
                }
            });
        });
    </script>

表格代码- 该表格旨在在单击“搜索”按钮时显示。

 <script type="text/javascript">
        $(document).ready(function () {
            var table = $('#userAccountDetails').DataTable({
            });
            $('#userAccountDetails_wrapper').hide();
            $('#searchUser').click(function () {
                $('#userAccountDetails_wrapper').show();
                table.search($(this).val()).draw();
            });
        })
    </script>