引导表过滤器-如何添加“;没有找到匹配的记录“;没有结果时行

bootstrap table filter - how to add "No matching records found" row when no results?

本文关键字：记录 结果 何添加 添加 过滤器      更新时间：2023-09-26

我使用以下代码片段http://jsfiddle.net/giorgitbs/52aK9/1/:

$(document).ready(function () {
(function ($) {
    $('#filter').keyup(function () {
       var rex = new RegExp($(this).val(), 'i');
       $('.searchable tr').hide();
       $('.searchable tr').filter(function () {
          return rex.test($(this).text());
       }).show();
  })
}(jQuery));
});

这很管用。但是，当没有结果而不是空白表时，如何显示包含文本"未找到匹配记录"的行？

我会这样做。首先，我在表中添加一行（默认情况下隐藏），以不显示任何数据。然后在jQuery中，检查可见的行数。如果为0，则显示隐藏行。

$(document).ready(function () {
    (function ($) {
        $('#filter').keyup(function () {
            var rex = new RegExp($(this).val(), 'i');
            $('.searchable tr').hide();
            $('.searchable tr').filter(function () {
                return rex.test($(this).text());
            }).show();
            $('.no-data').hide();
            if($('.searchable tr:visible').length == 0)
            {
                $('.no-data').show();
            }
        })
    }(jQuery));
});
.no-data {
    display: none;
    text-align: center;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-group"> <span class="input-group-addon">Filter</span>
    <input id="filter" type="text" class="form-control" placeholder="Type here...">
</div>
<table class="table table-striped">
    <thead>
        <tr>
            <th>Code</th>
            <th>Name</th>
            <th>Default</th>
            <th>Status</th>
        </tr>
    </thead>
    <tbody class="searchable">
        <tr class="no-data">
            <td colspan="4">No data</td>
        </tr>
        <tr>
            <td>EUR</td>
            <td>EURO</td>
            <td></td>
            <td>Active</td>
        </tr>
        <tr>
            <td>GBP</td>
            <td>Pound</td>
            <td></td>
            <td>Active</td>
        </tr>
        <tr>
            <td>GEL</td>
            <td>Georgian Lari</td>
            <td><span class="glyphicon glyphicon-ok"></span>
            </td>
            <td>Active</td>
        </tr>
        <tr>
            <td>USD</td>
            <td>US Dollar</td>
            <td></td>
            <td>Active</td>
        </tr>
    </tbody>
</table>

您可以在引导程序中使用以下代码添加找到的记录数：

<tr class="no-data">
    <td colspan="14">No data available in table</td>
</tr>

这里，"14"表示在标题行中存在的列的数量。

相关文章：