Bootstrap多選下拉選框不能在分頁表上工作

Question

我有一個動態填充的分頁表。我在其中一列中使用了「bootstrap multiselect複選框」選項。這個插件在表格的第一頁中工作正常，但是當我嘗試導航到分頁表格中的下一頁時，「boostrap multislect下拉複選框選項變成普通的常規多選選項而沒有複選框。此外，搜索選項不起作用。在這裏失蹤？

<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

考慮您的動態填充表，您可以掛鉤一個事件處理程序的DataTable page change event（數據表版本> = 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, 
     }); 
});