Jquery Datatable issue with bootstrap 4 modal

Question

Currently i have a datatable like this,

https://prnt.sc/nbfmge

I am opening bootstrap 4 modal when a user click on no of items, it open will

https://prnt.sc/nbfmrj

But i am not getting search and pagination functionality when datatable is in modal. Here's my code

Here's HTML code:

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

And this is my jquery code:

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

How can i get pagination and search feature in modal datatable ?

Answer 1

Got a solution, change id="datatables" bootstrap modal body id to 2, 3 or any number and also change this here $('#datatables2').DataTable(); Now the Jquery datatable will also work fine with bootstrap modal.