表格标题不与 jQuery DataTables 中的正文水平滚动

Posted

技术标签:

【中文标题】表格标题不与 jQuery DataTables 中的正文水平滚动【英文标题】：table header is not scrolling horizontally with the body in jQuery DataTables 【发布时间】：2020-10-25 00:52:48 【问题描述】：

我正在使用 jQuery DataTables，我在标题表下添加了选择输入 (bootstrap-select) 来过滤我的数据。

当我使用引导程序selectpicker 时，数据表隐藏了下拉菜单，并且无法弹出选择。我用过

.dataTables_scrollHead  overflow: visible !important;

它修复了弹出窗口，现在选择选项不会被数据表隐藏，但它与标题混淆了。它现在已修复，即使我指定了"scrollX": true，水平滚动时也不会移动。只有页脚和正文在 X 轴上滚动。

请有什么建议是什么导致了这个问题？非常感谢。

$(document).ready(function() 

// clone tr
$('#liveTable thead tr').clone(true).appendTo( '#liveTable thead' );
// set id to the cloned tr
$('#liveTable thead tr:eq(1)').attr('id', 'selectFilter');
// add select to each th in the cloned tr 
$('#liveTable thead tr:eq(1) th').each( function (i) 
 $(this).html( '<select class="added"><option value="">All</option></select>' ); 
  );

    var liveTable = $('#liveTable').DataTable( 
    "processing": true,
    "serverSide": true,
    "ajax": "https://api.npoint.io/49da61bee945ca8aa32a",
    "columns": [
            "data": "COUNTRY_NAME",
            "data": "COUNTRY_CODE",
            "data": "TERRITORY",
            "data": "MARKET",
            "data": "REGION", 
            "data": "CustomerName",
            "data": "STATUS",
            "data": "OrderQty",
            "data": "Crncy",
            "data": "LocalPrice",
            "data": "Dollarprice",
            "data": "Europrice",
            "data": "Poundprice", 
            "data": "ShipTo", 
            "data": "ShipToName", 
            "data": "ShipToHouseStreetNumber", 
            "data": "ShipToCity",
            "data": "ShipToPostalCode",
            "data": "ShipToRegion", 
            "data": "ShipToTelephone", 
            "data": "ShipToEmail", 
            "data": "ShipToCountry"              
            ],
    
    
        "orderCellsTop": true,
    "scroller": true,
    "scrollY": 400,
    "scrollX": true,
    "scrollCollapse": true,
    "paging": false,
    "searching": false,

    initComplete: function ()  
    
    var k = 0;
    // loop through each select inside my cloned tr
    $('#liveTable thead tr:eq(1) th .added').each(function()   

    // get unique values in the current column
    var unique = liveTable.columns( k ).data().eq( 0 ).unique().sort();
        
    var option = '';
    // loop through unique array to add all items as options
    for (var i=0;i<unique.length;i++)
       option += '<option value="'+ unique[i] + '">' + unique[i] + '</option>';

    
        // append all options inside current select
    $("tr:eq(1) th:eq(" + k + ") .added").append(option);
    //apply bootstrap select plugin
    $("tr:eq(1) th:eq(" + k + ") .added").selectpicker();
    // increment k so that next select will check next column
    k++;

          );

                
 );


 );
thead select 
width: 100%; 
    
.dataTables_scrollHead
  overflow: visible !important;
  width: 100%;
 
<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="liveTable" class="table table-bordered" style="width:100%">
            
        <thead>
            <tr>
            <th>COUNTRY_NAME</th>
            <th>COUNTRY_CODE</th>
            <th>TERRITORY</th>
            <th>MARKET</th>
            <th>REGION</th>
            <th>CustomerName</th>
            <th>STATUS</th>
            <th>OrderQty</th>
            <th>Crncy</th>
            <th>LocalPrice</th>
            <th>Dollarprice</th>
            <th>Europrice</th>
            <th>Poundprice</th>
            <th>Ship To</th>
            <th>Ship To Name</th>
            <th>Ship To House/ Street Number</th>
            <th>Ship To City</th>
            <th>Ship To Postal Code</th>
            <th>Ship To Region</th>
            <th>Ship To Telephone</th>
            <th>Ship To Email</th>
            <th>Ship To Country</th>
            </tr>
        </thead>

        <tfoot>
            <tr>
           <th>COUNTRY_NAME</th>
            <th>COUNTRY_CODE</th>
            <th>TERRITORY</th>
            <th>MARKET</th>
            <th>REGION</th>
            <th>CustomerName</th>
            <th>STATUS</th>
            <th>OrderQty</th>
            <th>Crncy</th>
            <th>LocalPrice</th>
            <th>Dollarprice</th>
            <th>Europrice</th>
            <th>Poundprice</th>
            <th>Ship To</th>
            <th>Ship To Name</th>
            <th>Ship To House/ Street Number</th>
            <th>Ship To City</th>
            <th>Ship To Postal Code</th>
            <th>Ship To Region</th>
            <th>Ship To Telephone</th>
            <th>Ship To Email</th>
            <th>Ship To Country</th>

            </tr>
        </tfoot>
        
    </table>

【问题讨论】：

【参考方案1】：

我找到了一个解决方案，希望将来对某人有用。 我删除了

.dataTables_scrollHead
  overflow: visible !important;
  width: 100%;

我将数据表 css 原样保留在 bootstrap-select data-container="body" 中。如果选择元素位于带有overflow: hidden 的元素内，这很有用，所以我的选择应该如下所示

<select class="added" data-container="body"><option value="">All</option></select>

【讨论】：

【参考方案2】：

我为这个表和类添加了外部 div table-responsive 删除了 jQuery 折叠 X 和 Y 滚动现在它与标题一起滚动

$(document).ready(function() 

// clone tr
$('#liveTable thead tr').clone(true).appendTo( '#liveTable thead' );
// set id to the cloned tr
$('#liveTable thead tr:eq(1)').attr('id', 'selectFilter');
// add select to each th in the cloned tr 
$('#liveTable thead tr:eq(1) th').each( function (i) 
 $(this).html( '<select class="added"><option value="">All</option></select>' ); 
  );

    var liveTable = $('#liveTable').DataTable( 
    "processing": true,
    "serverSide": true,
    "ajax": "https://api.npoint.io/49da61bee945ca8aa32a",
    "columns": [
            "data": "COUNTRY_NAME",
            "data": "COUNTRY_CODE",
            "data": "TERRITORY",
            "data": "MARKET",
            "data": "REGION", 
            "data": "CustomerName",
            "data": "STATUS",
            "data": "OrderQty",
            "data": "Crncy",
            "data": "LocalPrice",
            "data": "Dollarprice",
            "data": "Europrice",
            "data": "Poundprice", 
            "data": "ShipTo", 
            "data": "ShipToName", 
            "data": "ShipToHouseStreetNumber", 
            "data": "ShipToCity",
            "data": "ShipToPostalCode",
            "data": "ShipToRegion", 
            "data": "ShipToTelephone", 
            "data": "ShipToEmail", 
            "data": "ShipToCountry"              
            ],
    
    
        "orderCellsTop": true,
    "scroller": true,  
    "paging": false,
    "searching": false,

    initComplete: function ()  
    
    var k = 0;
    // loop through each select inside my cloned tr
    $('#liveTable thead tr:eq(1) th .added').each(function()   

    // get unique values in the current column
    var unique = liveTable.columns( k ).data().eq( 0 ).unique().sort();
        
    var option = '';
    // loop through unique array to add all items as options
    for (var i=0;i<unique.length;i++)
       option += '<option value="'+ unique[i] + '">' + unique[i] + '</option>';

    
        // append all options inside current select
    $("tr:eq(1) th:eq(" + k + ") .added").append(option);
    //apply bootstrap select plugin
    $("tr:eq(1) th:eq(" + k + ") .added").selectpicker();
    // increment k so that next select will check next column
    k++;

          );

                
 );


 );
thead select 
width: 100%; 
    
.dataTables_scrollHead
  overflow: visible !important;
  width: 100%;
 
<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>
<div class="table-responsive">

           <table id="liveTable" class="table table-bordered" style="width:100%">
            
        <thead>
            <tr>
            <th>COUNTRY_NAME</th>
            <th>COUNTRY_CODE</th>
            <th>TERRITORY</th>
            <th>MARKET</th>
            <th>REGION</th>
            <th>CustomerName</th>
            <th>STATUS</th>
            <th>OrderQty</th>
            <th>Crncy</th>
            <th>LocalPrice</th>
            <th>Dollarprice</th>
            <th>Europrice</th>
            <th>Poundprice</th>
            <th>Ship To</th>
            <th>Ship To Name</th>
            <th>Ship To House/ Street Number</th>
            <th>Ship To City</th>
            <th>Ship To Postal Code</th>
            <th>Ship To Region</th>
            <th>Ship To Telephone</th>
            <th>Ship To Email</th>
            <th>Ship To Country</th>
            </tr>
        </thead>

        <tfoot>
            <tr>
           <th>COUNTRY_NAME</th>
            <th>COUNTRY_CODE</th>
            <th>TERRITORY</th>
            <th>MARKET</th>
            <th>REGION</th>
            <th>CustomerName</th>
            <th>STATUS</th>
            <th>OrderQty</th>
            <th>Crncy</th>
            <th>LocalPrice</th>
            <th>Dollarprice</th>
            <th>Europrice</th>
            <th>Poundprice</th>
            <th>Ship To</th>
            <th>Ship To Name</th>
            <th>Ship To House/ Street Number</th>
            <th>Ship To City</th>
            <th>Ship To Postal Code</th>
            <th>Ship To Region</th>
            <th>Ship To Telephone</th>
            <th>Ship To Email</th>
            <th>Ship To Country</th>

            </tr>
        </tfoot>
        
    </table></div>

【讨论】：

我也是这样做的，但我需要保持水平滚动 Y，因为我的表包含大量数据。当我向下滚动时，您的解决方案将隐藏标题表。使用 scrollY : 400 所以标题将始终可见并且您滚动正文。你明白我的意思了吗？ 查看此链接datatables.net/examples/basic_init/scroll_xy.html

以上是关于表格标题不与 jQuery DataTables 中的正文水平滚动的主要内容，如果未能解决你的问题，请参考以下文章

JQuery Datatables 表格工具，删除 PDF 导出

使用自定义表格标签 DataTables jQuery 进行动态排序

jQuery Datatables - 如何在工具栏和表格之间插入 div？

第二次渲染后表格列宽发生变化 - JQuery DataTables

jQuery DataTables“表中没有可用数据”

JQuery中DataTables强大的表格解决方案