I am having a dynamically populated paginated table. I am using "bootstrap multiselect checkbox " option in one of the column. This plugin works fine in first page of the table , but when i try to navigate to next pages on paginated table , "boostrap multiselect drop down checkbox options become a plain normal multiselect option without checkbox. Also search option is not working .Is there something missing here ?
<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>
Considering your dynamically populated table, You can hook an event handler to datatable page change event (datatable version >= 1.10) and there re-init the multiselect dropdown inside that.
$('#dbResultsTable').on( 'page.dt', function () {
$('.applicationNameSelectClass').multiselect({
includeSelectAllOption : true ,
enableFiltering: true,
});
});
Edit:
Here is working example
Changed the page.dt to draw.dt, as page.dt is firing too early.
$('#dbResultsTable').on('draw.dt', function () {
$('.applicationNameSelectClass').multiselect({
includeSelectAllOption : true ,
enableFiltering: true,
});
});