Javascript DataTable：默认情况下隐藏数据

我想将数据隐藏为默认值，并在搜索框中显示结果

以下是我当前的设置：

<script type="text/javascript">

  $( document ).ready(function() {

    $('#inventory').dataTable({

      "lengthMenu": [ [5], [10, 25, 50, "All"] ],
      "bLengthChange": false,
      "search": {
        "caseInsensitive": true
      }
    });


    var dataTable = $('#inventory').dataTable();
    $("#searchbox").keyup(function() {
      dataTable.fnFilter(this.value);
    });  



  });

</script>

---

您可以搜索一些不存在的值吗？在创建这样的datatable之后是否有任何值

$('#inventory').dataTable({

      "lengthMenu": [ [5], [10, 25, 50, "All"] ],
      "bLengthChange": false,
      "search": {
        "caseInsensitive": true
      }
    });


    var dataTable = $('#inventory').dataTable();      

dataTable.fnFilter('some non existant value');


    $("#searchbox").keyup(function() {
      dataTable.fnFilter(this.value);
    });  

首先，在我的桌子上绕一圈，给它一个id=main

---

是的，我能。我不确定这是否是最好的方法，因为我仍然可以看到我的表，消息说，没有找到匹配的记录，我担心这会混淆我的用户，然后离开。

<div id="main">

<table class="display" id="inventory">
    <thead class="thin-border-bottom ">

        <th>SKU</th>
        <th>Description</th>
        <th>Stock</th>

    </thead>
    <tbody>

        @foreach ( Inventory::all() as $inventory)

        <tr>

            <td>{{ $inventory->sku }} </td>
            <td>{{ $inventory->description }} </td>
            <td>{{ $inventory->stock }} </td>

        </tr>

        @endforeach

    </tbody>
</table>


</div>

$('#main').hide();


  // Setting to Inventory Table 
  $('#inventory').dataTable({

    "lengthMenu": [ 10 ] ,
    "bLengthChange": false,

  });


  // Bind the value from a new search to the dataTable
  var dataTable = $('#inventory').dataTable();

  $("#searchbox").keyup(function() {
    dataTable.fnFilter(this.value);

    $('#main').show(); // show the main div 
  });