bootstrap4数据表搜索选项不工作

Question

我使用bootstrap4数据表来显示行限制

>

HTML代码

<table class="table table-bordered" id="tb_requisiton" width="100%" cellspacing="0">
<thead>
    <tr>
       <th>Std. ID</th>
        <th>Name</th>          
    </tr>
</thead>        
<tfoot>
  <tr>
    <th>Std. ID</th>
      <th>Name</th>                    
        </tr>
</tfoot>
</table>

Ajax填充代码

  var trHTML = '';
    for (var i = 0; i < data.length; i++) {              
      var item = data[i];       

      trHTML += '<tr>'
      trHTML += '<td>'+ item.client_id + '</td>'
      trHTML += '<td>'+ item.name + '</td>'           
      trHTML += '</tr>'                
    }

    $('#tb_requisiton tbody').append(trHTML);

Onload我使用了下面的代码

    $(document).ready(function() {

    $('#tb_requisiton').DataTable();

} );

我用过bellow js

  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css" rel="stylesheet">
 <link href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css" rel="stylesheet">

<script src=" https://code.jquery.com/jquery-3.3.1.js"></script>
<script src=" https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>

Answer 1

在DataTable中调用ajax。

$(document).ready(function() {

    $('#tb_requisiton').DataTable({
        "ajax": 'data.txt'//ajax url
    });

});