选择选项在Datatable

Question

$(document).ready(function(){
var table = $('#example').DataTable({
    dom: 'Zlfrtip',
    colReorder: true,
    scrollY:        300,
    deferRender: true,
    scrollX:        true,
    scrollCollapse: true,
    scroller: false,
    deferRender: true,
    autoWidth: false,
    searching: false,
    paging: false,
    ordering: false,
    info: false,
    "columns": [{
        "data": "Item",
        "width": "200px"
    }, ],
    "colResize": {
        "tableWidthFixed": false
    }
});
  $('.selectpicker').selectpicker({
      size: 12,
      dropupAuto: false
  });
})

<link href="https://www.vsss.co.in/Admin/assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="https://www.vsss.co.in/Admin/assets/global/plugins/datatables/datatables.min.css" rel="stylesheet" type="text/css" />
<link href="https://www.vsss.co.in/Admin/assets/global/plugins/datatables/plugins/bootstrap/datatables.bootstrap.css" rel="stylesheet" type="text/css" />
<link href="https://www.vsss.co.in/Admin/assets/bootstrap-select.min.css" rel="stylesheet" type="text/css" />
<script src="https://www.vsss.co.in/Admin/assets/global/plugins/jquery.min.js" type="text/javascript"></script>
<script src="https://www.vsss.co.in/Admin/assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="https://www.vsss.co.in/Admin/assets/bootstrap-select.min.js" type="text/javascript"></script>
<script src="https://www.vsss.co.in/Admin/assets/global/scripts/datatable.js" type="text/javascript"></script>
<script src="https://www.vsss.co.in/Admin/assets/global/plugins/datatables/datatables.min.js" type="text/javascript"></script>
<script src="https://www.vsss.co.in/Admin/assets/global/plugins/datatables/plugins/bootstrap/datatables.bootstrap.js" type="text/javascript"></script>



<table class="table table-striped table-bordered table-hover order-column item_data" id="example" style="table-layout: fixed">
    <thead>
        <tr>
            <th>Item</th>
        </tr>
    </thead>
    <tbody>
       <tr>
           <td>
							<select class="form-control selectpicker">
							   <option>Example 1</option>
							   <option>Example 2</option>
							   <option>Example 3</option>
							   <option>Example 4</option>
							   <option>Example 5</option>
							</select>
           </td>
       </tr> 
    </tbody>
</table>

任何人都可以查看此代码，请告诉我为什么selectpicker在表格中显示选项。如何在桌子上显示选项，我尝试了z-index但是没有用。提前致谢。当我删除

时，它工作正常

  

scrollCollapse：true

出于某种原因，我无法将其删除。任何人都有解决方案而不删除它？

Answer 1

课堂电话<div class="container-custom-product-container"> <div class="ccpc-img-container"> <img src="<?php echo base_url('assets/images/poza1.jpg');?>" class="product-image"/> </div> <div class="ccpc-product-details-container"> <h4 class="text-center">Hamburger de porc</h4> <h6 class="text-center">carne de porc,chifla,ceapa,rosii,cartofi prajiti</h6> <h4 class="text-center price">20 lei</h4> <div class="ccpc-product-buttons form-group"> <div class="ccpc-input-container"><input type="number" class="form-control qty-input" placeholder="Cantitate"/></div> <div class="ccpc-btn-container"><button class="btn btn-primary orange-btn test-btn">Adauga in cos</button></div> </div> </div> </div>有dataTables_scrollBody 您必须在overflow: auto;。

中选择此项

none

Answer 2

对{"container": "body"}使用选项selectpicker。这是一个片段：

＆＃13;

＆＃13;

$(document).ready(function(){
var table = $('#example').DataTable({
    dom: 'Zlfrtip',
    colReorder: true,
    scrollY:        300,
    deferRender: true,
    scrollX:        true,
    scrollCollapse: true,
    scroller: false,
    deferRender: true,
    autoWidth: false,
    searching: false,
    paging: false,
    ordering: false,
    info: false,
    "columns": [{
        "data": "Item",
        "width": "200px"
    }, ],
    "colResize": {
        "tableWidthFixed": false
    }
});
  $('.selectpicker').selectpicker({
      size: 12,
      dropupAuto: false,
      container: 'body'
  });
})

＆＃13;

<link href="https://www.vsss.co.in/Admin/assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="https://www.vsss.co.in/Admin/assets/global/plugins/datatables/datatables.min.css" rel="stylesheet" type="text/css" />
<link href="https://www.vsss.co.in/Admin/assets/global/plugins/datatables/plugins/bootstrap/datatables.bootstrap.css" rel="stylesheet" type="text/css" />
<link href="https://www.vsss.co.in/Admin/assets/bootstrap-select.min.css" rel="stylesheet" type="text/css" />
<script src="https://www.vsss.co.in/Admin/assets/global/plugins/jquery.min.js" type="text/javascript"></script>
<script src="https://www.vsss.co.in/Admin/assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="https://www.vsss.co.in/Admin/assets/bootstrap-select.min.js" type="text/javascript"></script>
<script src="https://www.vsss.co.in/Admin/assets/global/scripts/datatable.js" type="text/javascript"></script>
<script src="https://www.vsss.co.in/Admin/assets/global/plugins/datatables/datatables.min.js" type="text/javascript"></script>
<script src="https://www.vsss.co.in/Admin/assets/global/plugins/datatables/plugins/bootstrap/datatables.bootstrap.js" type="text/javascript"></script>



<table class="table table-striped table-bordered table-hover order-column item_data" id="example" style="table-layout: fixed">
    <thead>
        <tr>
            <th>Item</th>
        </tr>
    </thead>
    <tbody>
       <tr>
           <td>
							<select class="form-control selectpicker">
							   <option>Example 1</option>
							   <option>Example 2</option>
							   <option>Example 3</option>
							   <option>Example 4</option>
							   <option>Example 5</option>
							</select>
           </td>
       </tr> 
    </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

以下是 doc ：BS Selectpicker's container option