Bootstrap multiselect dropdown checkbox not working on paginated table

harpal18 picture harpal18 · Dec 31, 2014 · Viewed 10.5k times · Source

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>

Answer

SSA picture SSA · Dec 31, 2014

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,
        });
});