Search code examples
jquerytwitter-bootstrapcheckboxdatatablesbootstrap-multiselect

Bootstrap multiselect dropdown checkbox not working on paginated table


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>

Solution

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