Question

我有一个表，在行中点击一个模态窗口打开。多亏了这个：

th:onclick="'javascript:openPoolModal(\''+ ${networkHashrate.id} + '\');'"

openPoolModal.js看起来像：

function openPoolModal(id){

$.ajax({
    url: "/" + id,
    success: function(data){
    $("#PoolModalHolder").html(data);
    $("#personalModal").modal();
    $("#personalModal").modal('show');
}
});
}

PoolModalHolder只是我的main.html文件中的一个空div，其中第一个表被渲染。 personalModal是在模态对话框中打开的代码片段。

然后用personalModal填充模态对话框：

<div class="modal fade" id="personalModal" role="dialog" th:fragment="modalContents">
<div class="modal-dialog">

    <div class="modal-content">

        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title" th:text="'Network Id: ' + ${poolHashrates[0].networkHashrate.id}">Network Id</h4>
        </div>

        <div class="modal-body">
            <div class="table-responsive">
                <table width="100%" class="table table-hover " id="poolTable">

                    <thead class="thead-inverse">
                    <tr>
                        <th class="col-md-2 text-center">Pool name</th>
                        <th class="col-md-2 text-center">Date from</th>
                        <th class="col-md-2 text-center">Hashrate</th>
                    </tr>
                    </thead>

                    <tbody>
                    <tr th:each="poolHashrate : ${poolHashrates}">
                        <td class="text-center" th:text="${poolHashrate.poolDef.name}"> Sample data</td>
                        <td class="text-center" th:text="${poolHashrate.poolDef.date_from}">Maven Street 10, Glasgow</td>
                        <td class="text-center" th:text="${poolHashrate.hashrate}">999-999-999</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

我无法让DataTables在personalModal窗口内的桌面上工作。

标准DataTables初始化不起作用，即：

$(document).ready( function () {
$('#poolTable').DataTable();
} );

我也试过这个，但结果相同：

$( "#personalModal" ).focus(function() {
$('#poolTable').DataTable();
});

我添加了标题链接，它们是：jQuery，Bootstrap，DataTables.js。

我也尝试了table-responsive示例，但是再一次，它没有用。通过Spring控制器方法正确生成数据。我只需要应用sort＆amp;分页。

DataTables不会在模态中工作

0 个答案: