javascript - 如何在用户 Bootstrap 表中搜索用户？

Question

我正在使用 spring mvc 开发一个用于用户管理的应用程序。我正在使用这个bootstrap table在我的 jsp 页面中，这让我对表中的数据进行研究。

在我的表中，用户的数据是从数据库中检索的。这是代码:

<div class="col-md-9">
    <form action="#" method="get">
        <div class="input-group">
            <!-- USE TWITTER TYPEAHEAD JSON WITH API TO SEARCH -->
            <input class="form-control" id="system-search" name="q"
                placeholder="Search for" required> <span
                class="input-group-btn">
                <button type="submit" class="btn btn-default">
                    <i class="glyphicon glyphicon-search"></i>
                </button>
            </span>
        </div>
    </form>
    <table class="table table-list-search">
        <thead>
            <tr>
                <th>id</th>
                <th>Name</th>
                <th>Surname</th>
                <th>email</th>
                <th>contact</th>
                <th>Edit</th>
                <th>Delete</th>
            </tr>
        </thead>
        <c:forEach items="${listUsers}" var="user">
            <tbody>
                <tr>
                    <td>${user.id}</td>
                    <td>${user.name}</td>
                    <td>${user.surname}</td>
                    <td>${user.email}</td>
                    <td>${user.contact}</td>
                    <td>
                        <p data-placement="top" data-toggle="tooltip" title="Edit">
                            <button class="btn btn-primary btn-xs" data-title="Edit"
                                    data-toggle="modal"
                                    onclick="location.href='<c:url value="/modifier/${user.id}" />'">
                                <span class="glyphicon glyphicon-pencil"></span>
                            </button>
                        </p>
                    </td>
                    <td>
                        <p data-placement="top" data-toggle="tooltip" title="Delete">
                            <button class="btn btn-danger btn-xs" data-title="delete"
                                    data-delete='${user.id}' data-toggle="modal"
                                    data-target="#confirm-delete" data-href="/supprimer/${user.id}">
                                <span class="glyphicon glyphicon-trash"></span>
                            </button>
                        </p>
                    </td>
                </tr>
            </tbody>
        </c:forEach>
    </table>
</div>

这是对表进行研究的脚本:

$(document).ready(function() {
    var activeSystemClass = $('.list-group-item.active');

    //something is entered in search form
    $('#system-search')
        .keyup(function() {
            var that = this;

            // affect all table rows on in systems table
            var tableBody = $('.table-list-search tbody');
            var tableRowsClass = $('.table-list-search tbody tr');
            $('.search-sf').remove();

            tableRowsClass
                .each(function(i, val) {
                    //Lower text for case insensitive
                    var rowText = $(val).text().toLowerCase();
                    var inputText = $(that).val().toLowerCase();
                    if (inputText != '') {
                        $('.search-query-sf').remove();
                        tableBody
                            .prepend('<tr class="search-query-sf"><td colspan="6"><strong>Searching for: "'
                                + $(that).val()
                                + '"</strong></td></tr>');
                    } else {
                        $('.search-query-sf').remove();
                    }

                    if (rowText.indexOf(inputText) == -1) {
                        //hide rows
                        tableRowsClass.eq(i).hide();
                    } else {
                        $('.search-sf').remove();
                        tableRowsClass.eq(i).show();
                    }
                });
                //all tr elements are hidden
                if (tableRowsClass.children(':visible').length == 0) {
                    tableBody.append('<tr class="search-sf"><td class="text-muted" colspan="6">No entries found.</td></tr>');
                }
            });
});

但是当我更改为动态表时，我得到的结果是搜索:这个词重复了n次!

我尝试更改脚本的代码，但没有找到正确的脚本。有人可以帮我吗？

Answer 1

看起来这可能是问题所在

tableRowsClass.each(function(i, val) {
               //Lower text for case insensitive
               var rowText = $(val).text().toLowerCase();
               var inputText = $(that).val().toLowerCase();
               if (inputText != '') {
                   $('.search-query-sf').remove();
                   tableBody.prepend('<tr class="search-query-sf"><td colspan="6"><strong>Searching for: "'+ $(that).val()+ '"</strong></td></tr>');

.each意味着您要添加 <tr class="search-query-sf"><td colspan="6"><strong>Searching for: "'+ $(that).val()+ '"</strong></td></tr>到表的开头(因为它是前置的)，每个元素使用 .table-list-search tbody tr 一个

尝试移动tableBody.prepend('<tr class="search-query-sf"><td colspan="6"><strong>Searching for: "'+ $(that).val()+ '"</strong></td></tr>'); .each()之外因此它只运行一次。