引導4模態的Jquery數據表問題

Question

目前我有這樣的數據表，

https://prnt.sc/nbfmge

當用戶點擊沒有項目時，我打開bootstrap 4模態，它會打開

https://prnt.sc/nbfmrj

但是當數據表處於模態時，我沒有獲得搜索和分頁功能。 這是我的代碼

這是HTML代碼：

<!-- Modal body -->
<div class="modal-body">
    <div class="card">
        <div class="card-header">
            <h5 class="card-title float-left">List of items</h5>
        </div>
        <div class="card-body row">
            <div class="col-md-12">
                <div class="table-responsive">
                    <table class="table table-bordered display" id="datatables">
                        <thead>
                            <tr>
                                <th scope="col">#</th>
                                <th scope="col">Item Name</th>
                                <th scope="col">Item Model</th>
                                <th scope="col">Item Year</th>
                                <th scope="col">Item Condition</th>
                                <th scope="col">Item Price</th>
                                <th scope="col">Status</th>
                            </tr>
                        </thead>
                        <tbody id="showEmployeesReportItems">
                            <!-- List of Items -->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

這是我的jquery代碼：

$('#datatables').DataTable().destroy();
$('#showEmployeesReportItems').html(html);
$('#datatables').DataTable();

如何在模態數據表中獲得分頁和搜索功能？

Answer 1

得到一個解決方案，將id =“datatables”bootstrap modal body id更改為2,3或任何數字，並在此處更改$（'＃datatables2'）。DataTable（）; 現在，Jquery數據表也可以在bootstrap模式下正常工作。