在搜索数据表时数据表行减少到一个时显示按钮

Question

我正在使用 jQuery 数据表列出一组成员。当 table 搜索成员时，当 dataTable 行减少到只有该成员时，我希望出现一个按钮，否则该按钮应保持隐藏状态。

我找不到 link 的偶数处理程序。请帮我解决一下。

<script>
    $(function() {
        $('#addButton').hide();
    });
</script>

<script>
    $('#example4_filter input').keydown(function() {
        if ($('#example4 > tr').length == 1) {
            $('#addButton').show();
        } else {
            $('#addButton').hide();
        }
    });
</script>

<table id="example4" class="display table table-bordered table-striped" width="100%" cellspacing="0">
            <col width='110'>
            <col width='auto'>
            <col width='120'>
            <thead height='35'>
                <tr>
                    <th>Code</th>
                    <th>Member Name</th>
                    <th>NIC</th>
                    <th> <p id='addButton'> <a href="{{ url('') }}" class="btn btn-success btn-xs"> <span class="glyphicon glyphicon-check"></span> <strong> &nbsp Select </strong> </a> </p> </th>
                </tr>
            </thead>

            <tbody>
                @foreach ($memberDetails as $memberDetail)
                <tr>
                    <td data-search="Tiger Nixon"> {!! $memberDetail->id !!} </td>
                    <td> {!! $memberDetail->firstName.' '.$memberDetail->lastName !!} </td>
                    <td> {!! $memberDetail->nic !!} </td>
                    <td> </td>
                </tr>
                @endforeach
            </tbody>
        </table>

这是用于搜索 dataTable 的检查元素代码...

<div id="example4_wrapper" class="dataTables_wrapper form-inline dt-bootstrap no-footer">

    <div class="row">
        ::before
        <div class="col-sm-6"></div>
        <div class="col-sm-6">
            <div id="example4_filter" class="dataTables_filter">
                <label>

                    Search:

                    <input class="form-control input-sm" type="search" placeholder="" aria-controls="example4"></input>

                </label>
            </div>
        </div>
        ::after

    </div>

$('#example4').DataTable({
                "paging": true,
                "lengthChange": false,
                "searching": true,
                "ordering": false,
                "info": false,
                "autoWidth": false,
                "lengthMenu": [[5], [5]]
            });

Answer 1

我假设您使用的是 dataTables 1.10.x。您可以利用 search.dt 事件。如果你有一个像这样初始化的 table :

var table = $('#example').DataTable({ 
    //options
})

当且仅当一条记录在数据表中可见时，使用 search.dt 事件显示按钮：

$('#example').on('search.dt', function() {
   if (table.rows( {filter:'applied'} ).data().length == 1) {
      $('#addButton').show();
   } else {
      $('#addButton').hide();       
   }     
})

在搜索数据表时数据表行减少到一个时显示按钮

Show button when dataTable rows reduce to one on searching the dataTable

html

javascript

datatable

jquery

show-hide