用选项数组填充 bootstrap-select

Question

我使用 datatables and on footer I added anempty dropdown select using Bootstrap-select 创建了一个 table，如下所示：

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

创建数据table 时，我想将该列的不同值添加为 select 中的选项。

问题是：数据 table 绘制时没有错误，但 select 未填充。它仍然显示为空，但是当我在浏览器上使用检查时，我看到选项已经在 select 中。

我在 append 之前使用 empty 并尝试 html 而不是 append 但仍然没有显示选项。我也试过 footerCallback 而不是 initComplete.

当我在 html 中的 select 中手动添加选项时，它工作正常。在 datatable 中，页脚似乎在正文之前加载，这就是为什么它在正文准备好之前显示时不显示选项的原因。

有什么建议可以解决吗？非常感谢。

$(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

您需要在添加数据之后初始化选择器。

$(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>

Answer 2

你的错误是启动你的选择器之前用选项填充它，而相反 is recommended 在他们的参考文档中。以下是一个固定的现场演示：

$('#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>

用选项数组填充 bootstrap-select

Populate bootstrap-select with array of options

javascript

jquery

bootstrap-select