Populate bootstrap-select with array of options

Question

I created a table using datatables and on footer I added anempty dropdown select using Bootstrap-select as below:

<tfoot>
    <tr>
      <th><select class="selectpicker" multiple></select></th>
    </tr>
</tfoot>

When my datatable is created, I want to add the distinct values of that column as options in my select.

The issue is: the datatable is drawn without errors but the select is not populated. It still shows empty but when i use inspect on browser I see the options are already inside the select.

I used empty before append and tried html instead of append but still not showing the options. I also tried footerCallback instead of initComplete .

When I add the options manually inside my select in the html, it works fine. it looks like in datatable the footer is loaded before the body that's why it's not showing the options when it's displayed before the body is ready.

Any suggestions please how I could fixe it? Thank you very much.

 $(document).ready(function() { $('.selectpicker').selectpicker(); $('#example').DataTable({ "lengthChange": false, "info": false, "paging": false, "searching": false, initComplete: function () { this.api().columns().every( function () { var column = this; column.data().unique().sort().each( function ( d, j ) { $('.selectpicker').append( '<option value="'+d+'">'+d+'</option>' ) } ); } ); } }); });

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css" rel="stylesheet" /> <link href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css" rel="stylesheet" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.17/css/bootstrap-select.min.css"> <script src="https://code.jquery.com/jquery-3.5.1.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script> <script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script> <script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.17/js/bootstrap-select.min.js"></script> <table id="example" class="table table-bordered" style="width:100%"> <thead> <tr> <th>Country</th> </tr> </thead> <tbody> <tr><td>Austria</td></tr> <tr><td>Japan</td></tr> <tr><td>Sweden</td></tr> <tr><td>Finland</td></tr> <tr><td>India</td></tr> <tr><td>USA</td></tr> <tr><td>Sweden</td></tr> <tr><td>France</td></tr> <tr><td>Austria</td></tr> </tbody> <tfoot> <tr> <th><select class="selectpicker" multiple></select></th> </tr> </tfoot> </table>

Answer 1

Your mistake was initiating your selectpicker before populating it with options, whereas the opposite is recommended in their reference docs. Following is a fixed live-demo:

 $('#example').DataTable({ lengthChange: false, info: false, paging: false, searching: false, initComplete: function(){ const table = this.api(); table.columns().every(function(){ const title = $(this.header()).text(); const options = this.data().unique().sort().toArray().reduce((options, item) => options += `<option value="${item}">${item}</option>`, ''); $('.selectpicker').append(options).selectpicker() }); } })

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css" rel="stylesheet" /><link href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css" rel="stylesheet" /><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.17/css/bootstrap-select.min.css"><script src="https://code.jquery.com/jquery-3.5.1.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script><script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script><script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.17/js/bootstrap-select.min.js"></script><table id="example" class="table table-bordered" style="width:100%"><thead><tr><th>Country</th></tr></thead><tbody><tr><td>Austria</td></tr><tr><td>Japan</td></tr><tr><td>Sweden</td></tr><tr><td>Finland</td></tr><tr><td>India</td></tr><tr><td>USA</td></tr><tr><td>Sweden</td></tr><tr><td>France</td></tr><tr><td>Austria</td></tr></tbody><tfoot><tr><th><select class="selectpicker" multiple></select></th></tr></tfoot></table>

Answer 2

You will need to initialize the selectpicker after you append the data not before.

 $(document).ready(function() { $('#example').DataTable({ "lengthChange": false, "info": false, "paging": false, "searching": false, initComplete: function () { this.api().columns().every( function () { var column = this; column.data().unique().sort().each( function ( d, j ) { $('.selectpicker').append( '<option value="'+d+'">'+d+'</option>' ) } ); } ); } }); // initialize the selectpicker after appending options $('.selectpicker').selectpicker(); });

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css" rel="stylesheet" /> <link href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css" rel="stylesheet" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.17/css/bootstrap-select.min.css"> <script src="https://code.jquery.com/jquery-3.5.1.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script> <script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script> <script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.17/js/bootstrap-select.min.js"></script> <table id="example" class="table table-bordered" style="width:100%"> <thead> <tr> <th>Country</th> </tr> </thead> <tbody> <tr><td>Austria</td></tr> <tr><td>Japan</td></tr> <tr><td>Sweden</td></tr> <tr><td>Finland</td></tr> <tr><td>India</td></tr> <tr><td>USA</td></tr> <tr><td>Sweden</td></tr> <tr><td>France</td></tr> <tr><td>Austria</td></tr> </tbody> <tfoot> <tr> <th><select class="selectpicker" multiple></select></th> </tr> </tfoot> </table>