Question

我正在使用bootstrap4 dataTables显示行数限制和搜索选项。我正在使用Ajax从服务器填充数据。数据已填充到dataTables中，但搜索选项为＆show row选项不起作用。这是我的桌子图片

我用过波纹管代码

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

加载时我已经使用了波纹管代码

    $(document).ready(function() {

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

} );

我用过波纹管js和css

  <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
    });

});

bootstrap4 dataTables搜索选项不起作用

1 个答案: