1

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

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

1 回答 1

3

考虑到您的动态填充表，您可以将事件处理程序挂钩到数据表页面更改事件（数据表版本> = 1.10），然后在其中重新初始化多选下拉菜单。 

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

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

编辑：

这是工作示例

将 page.dt 更改为 draw.dt，因为 page.dt 触发得太早了。

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

       $('.applicationNameSelectClass').multiselect({
            includeSelectAllOption : true ,
             enableFiltering: true,
        });
});
于 2014-12-31T10:07:38.140 回答