Question

我有一个简单的问题，但是对于那些甚至连基本js都挣扎的人来说，这是火箭科学。我已经下载了两个非常基本的脚本：一个是实时搜索，另一个是分页脚本。它们都作用于其中包含一些数据的表。一切都按预期工作，除了我删除搜索词时，而不是返回到分页的表，而是显示所有记录。使用的脚本在这里：

https://www.codexworld.com/jquery-live-search-filter-on-html-table/

https://github.com/wikiti/jquery-paginate

它们非常适合我的简单应用程序，但是当我删除搜索字词后，我不知道如何使表恢复为分页显示。这是我使用的代码：

<script>    
$(document).ready(function(){
    $('.dataSearch').on('keyup',function(){
        var searchTerm = $(this).val().toLowerCase();
        $('#carriersTable tbody tr').each(function(){
            var linestr = $(this).text().toLowerCase();
            if(linestr.indexOf(searchTerm) === -1){
                $(this).hide();
            }else{
                $(this).show();
            }
        });
    });
});

$('#carriersTable').paginate({ limit: 2 });
</script>

我尝试移动最后一行（所有可能的组合），但是每次搜索都只会生成无数的分页链接：）。

谢谢！

Answer 1

这是一个建议。可能可以对其进行优化，但是可以说明这一点。

<script>    
$(document).ready(function(){
    $('.dataSearch').on('keyup',function() {
        // Get the search searchTerm
        var searchTerm = $(this).val().toLowerCase();

        // Prepare a "state" array to store rows you need to get back to
        var state = [];

        // Use the each loop with "key" as index iterator parameter
        $('#carriersTable tbody tr').each(function(key, value) {
            var linestr = $(this).text().toLowerCase();
            if (linestr.indexOf(searchTerm) === -1) {
                $(this).hide();
            } else {
                // Here you store the row in state variable since you want to show it later
                state.push($(this));

                // Show the row for the current display
                $(this).show();
            }
        });

        // Now, you have a state var containing all the rows previously shown
        console.log(state);

        // You can create an event to detect when the search box is empty, and restore the state
        if (searchTerm.length == 0) {
            // Then you restore the state array after turning it into a string
            var restored = state.join('');

            // Empty the table and add the string
            $('#carriersTable').empty().append(restored);

            // You might need to refresh your pagination here, depends on your plugin :)
        }
    });
});
</script>

结合使用jquery实时搜索和分页

1 个答案: