DataTable：默认隐藏数据

Question

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

这是我目前的设置：

<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>

Answer 1

你可以在创建像这样的数据表之后搜索一些不存在的值（有没有）。

$('#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);
    });  

Answer 2

  

首先，在我的表格周围打一个<div>并给它一个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>

  

其次，修复我的脚本以隐藏该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 
  });