Populate bootstrap-select with array of options-Twitter bootstrap

DevTN
June 26, 2020
117 views
0 votes
2 Answers

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 emptybefore 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>

Answers

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>

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>

Please signup or login to give your own answer.

Click here to cancel reply.