Question

我有一个动态填充的分页表。我正在其中一个列中使用“bootstrap multiselect checkbox”选项。这个插件在表的第一页工作正常，但是当我尝试导航到分页表上的下一页时，“boostrap multiselect下拉复选框选项变成了一个普通的正常多选选项，没有复选框。此外，搜索选项也无效。还有什么东西。在这里失踪？

<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="css/jquery.dataTables.min.css" type="text/css">
<link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css">
<link rel="stylesheet" href="css/dataTables.bootstrap.css" type="text/css">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrap-multiselect.js"></script>
<script type="text/javascript" src="js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="js/searchDataTable.js"></script>

<script type="text/javascript">
    $(document).ready(function() {
        $('.applicationNameSelectClass').multiselect({
            includeSelectAllOption : true ,
             enableFiltering: true,
        });
    });
</script>

<script>
$(document).ready(function() {
  $('#dbResultsTable').dataTable();
} );
</script>

                <form id="form">
                    <table border="1" id="dbResultsTable" class="table table-striped" >
                        <!-- Dynamically populated table  -->
                    </table>
                <input type="submit" id="submitId"/>
                  </form>

Answer 1

考虑到动态填充的表，您可以将事件处理程序挂钩到数据表page change event（数据表版本＆gt; = 1.10），然后在其中重新启动多选下拉列表。

$('#dbResultsTable').on( 'page.dt', function () {

$('.applicationNameSelectClass').multiselect({
            includeSelectAllOption : true ,
             enableFiltering: true,
        });
});

编辑：

这是working example

将page.dt更改为draw.dt，因为page.dt过早启动。

    $('#dbResultsTable').on('draw.dt', function () {

       $('.applicationNameSelectClass').multiselect({
            includeSelectAllOption : true ,
             enableFiltering: true,
        });
});

Bootstrap multiselect下拉复选框不适用于分页表

1 个答案: