jQuery Datatable问题与Bootstrap 4模态

目前我有一个这样的数据表,


https://prnt.sc/nbfmge


当用户单击任何项目时,我正在打开bootstrap 4 modal,它将打开


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

如何获得模态数据表中的分页和搜索功能?


慕码人8056858
浏览 243回答 1
1回答

慕姐4208626

有解决方案,将id =“ datatables”引导程序模式主体ID更改为2、3或任何数字,并在此处将其更改为$('#datatables2')。DataTable();&nbsp;现在,jQuery数据表也可以在引导模态下正常工作。
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript