javascript - 在表格排序器搜索功能上仅显示一个结果

Question

我创建了一个搜索功能，用于显示表中的数据。但是我只想显示一行作为结果。我想知道是否有人知道任何代码只会显示一行结果，而不是多行。

我当前的 HTML:

<input class="search selectable" placeholder="Find any film, TV series or video game release date..." data-column="0" type="search">
<table class="tablesorter">
<thead>
    <tr>
        <th>Name</th>
        <th>Release date</th>
        <th>Starring</th>
        <th>Genre</th>
        <th>Age rating</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>The Human Centipede 3 (Final Sequence)</td>
        <td>
            <ul>
                <li>Wednesday 1st July</li>
            </ul>
        </td>
        <td>
            <ul>
                <li>...</li>
            </ul>
        </td>
        <td>
            <ul>
                <li>Action</li>
            </ul>
        </td>
        <td>
            <ul>
                <li>18</li>
            </ul>
        </td>
    </tr>
       </tbody>
 </table>

CSS:

html {
position: fixed;
height: fixed;
background-color: #bc3030;
min-height: fit;
}
table {
width: 663.5px;
}
form {
display: inline-block;
border-radius: 5px;
background-color: #bc3030;
background-image: -ms-linear-gradient(top, #EDE5DB 0%, #DCD0C2 80%);
background-image: -moz-linear-gradient(top, #EDE5DB 0%, #DCD0C2 80%);
background-image: -webkit-linear-gradient(top, #EDE5DB 0%, #DCD0C2 80%);
background-image: linear-gradient(top, #EDE5DB 0%, #DCD0C2 8a0%);
box-shadow: inset 0 1px #F6F2EC, 0 3px 2px #E5E5E5;

}
input {
border: 2px solid #333333;
width: 529px;
height: 50px;
padding-left: 132px;
font-family:"Raleway";
font-size: 20px;
font-weight: normal;
font-weight: bold;
font-weight: 1000;
background: #fff url(http://static.wixstatic.com/media/97c989_1b9f42901df24660a8a3200c1abb366e.png_srz_p_112_61_75_22_0.50_1.20_0.0    0_png_srz) no-repeat 0.1px;
}
td, th {
width: 550px;
border-bottom: 0px solid #bc3030;
color: #000;
padding: 5px 21px;
font-family:"raleway";
font-weight: normal;
font-weight: bold;
font-weight: 10;
font-size: 18px;
}
thead div {
color: #fff;
padding: 0xpx;
margin-left: 0px;
line-height: normal;
border-left: 0px solid #333333;
}
tbody, td {
background: #fff;
}

Javascript:

document.ontouchmove = function (event) {
event.preventDefault();
}

$('table').on('filterEnd', function () {
if (this.config.lastSearch.join('') === '') {
    $(this).children('tbody').children().addClass('filtered');
}
});
$(function () {

var $table = $('table').tablesorter({
    theme: '',
    widgets: ["zebra", "filter"],
    widgetOptions: {
        filter_columnFilters: false,
        filter_saveFilters: true,
        filter_reset: '.reset'
    }
});


$.tablesorter.filter.bindSearch($table, $('.search'));


$('select').change(function () {
    $('.selectable').attr('data-column', $(this).val());
    $.tablesorter.filter.bindSearch($table, $('.search'), false);
});

});

Answer 1

我不建议这样做，因为这不是用户搜索时所期望的。

如果您必须这样做，请使用此代码 ( demo ):

$(function () {
    $('table')
        .tablesorter({
            theme: 'blue',
            widgets: ['zebra', 'filter']
        })
        .on('filterEnd', function(e, config ){
            if ( config.lastSearch.join('') !== '' ) {
                config.$table
                    .find('tbody tr')
                    .not('.filtered') // rows not hidden
                    .filter(':gt(0)') // target rows > first
                    .addClass('filtered'); // hide
            }
        });
});

我还建议添加注释，就像我在演示中所做的那样，告诉用户会发生什么。