数据表自定义工具栏不适用于 Select2 CSS

Question

这是代码

<link href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>  
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
 <!-- problem lays here -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />

<script type="text/javascript">

$(function () {
 
  $.ajaxSetup({
      headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      }
});

var table = $('.data-table').DataTable({
    processing: true,
    serverSide: true,
    responsive: true,
    ajax: "{{ route('users.index') }}",
    dom: '<l<"toolbar">f>rtip',
    initComplete: function(){
      $("div.toolbar").html('<div style="float:left;margin-left:4px;"><select class="form-control select2bs4 select2-hidden-accessible trash_all" style="width:140px;height:32px;margin-left:10px;" data-select2-id="17" tabindex="-1" aria-hidden="true"><option selected="selected" data-select2-id="19">Bulk Actions</option><option data-select2-id="38" value="trashAll">Trash</option></select></div><div style="float:left;margin-left:20px;"><select onchange="window.location = this.options[this.selectedIndex].value" class="form-control select2bs4 select2-hidden-accessible download-doc" style="width:140px;height:32px;margin-left:10px;padding-bottom:5px"" data-select2-id="17" tabindex="-1" aria-hidden="true"><option selected="selected" data-select2-id="19" value="{{route('users.index')}}">Download</option><option data-select2-id="38" value="{{route('users.pdf')}}">PDF</option><option data-select2-id="39" value="{{route('users.excel')}}">XLS</option><option data-select2-id="39" value="{{route('users.word')}}">Doc</option></select></div>');
    },
    columns: [
        {data: 'DT_RowIndex', name: 'DT_RowIndex'},
        {data: 'name', name: 'name'},
        {data: 'email', name: 'email'},
        {data: 'roles', name: 'roles'},
        {data: 'status', name: 'status'},
        {data: 'action', name: 'action', orderable: false, searchable: false},
    ]
});

$("div.toolbar").css("float", "left");

$('#roles').select2({
  ajax: {
  url: '{{ url('searchrole') }}',
  processResults: function(data){
  return {
    results: data.map(function(item){return {id: item.id, text: item.name} })
  }
 }
}
});

当我删除此代码时

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />

自定义工具栏正在运行

但是，当我让上面的代码存在时，自定义工具栏元素就消失了。我应该让它存在，因为如果我删除上面的代码，select2 将无法工作。

Answer 1

您可以通过这样做来显示那些 select 控件：

(1) 再次取消注释您的 select2.min.css 资源。

(2) 从您的代码中删除此 class：select2-hidden-accessible。它出现在您的 initComplete 函数中的 2 个位置，并导致您的控件被隐藏。

（您可能需要进行其他调整，具体取决于 HTML 代码块中剩余的 class 与 select2 CSS.)

数据表自定义工具栏不适用于 Select2 CSS

Datatable Custom Toolbar Not Working With Select2 CSS

datatable

datatables

laravel

laravel-5