logo标签列表

数据表格的scrollX水平滚动不起作用。

jquerycssdatatables
3

我有一个包含10多个列的表格。我正在使用datatables来显示数据。由于有很多列，所以我正在使用水平滚动条。但是滚动条没有出现。请帮忙解决。这是我表格的截图：

滚动条不起作用

<table id="example" class="display nowrap" cellspacing="0" width="100%">
    <thead>
        <tr>

    <th><center>Outlet ID</center></th>
    <th><center>Outlet Name</center></th>
    <th><center>Date</center></th>
    <th><center>Day</center></th>
    <th><center>Day Part</center></th>
    <th><center>Service</center></th>
    <th><center>Product</center></th>
    <th><center>Staff</center></th>
    <th><center>Pest</center></th>
    <th><center>Others</center></th>
    <th><center>Attentiveness</center></th>
    <th><center>Accuracy</center></th>
    <th><center>Speed</center></th>
    <th><center>Friendliness</center></th>
    <th><center>Food Handling & Hygiene</center></th>
    <th><center>Attentiveness</center></th>
    <th><center>Accuracy</center></th>
    <th><center>Speed</center></th>
    <th><center>Food</center></th>
    <th><center>Manpower</center></th>
    <th><center>Faulty Equipment</center></th>
    <th><center>Staff Behavior</center></th>
    <th><center>Restaurant Cleanliness</center></th>
    <th colspan=3><center>Action</center></th>
    </tr>
    </thead>
    <tbody>


     #code continue...

    </tbody>
    </table>

这是我用于滚动的CSS和脚本：

这里是我的CSS和滚动脚本

<style>
div.dataTables_wrapper {
    width: 800px;
    margin: 0 auto;
}
</style>


<script>
$(document).ready(function() {
$('#example').DataTable( {
    "scrollY": 300,
    "scrollX": true
} );
} );
</script>

我需要显示水平滚动条，因为我有超过10列的数据。请帮忙。结果应该显示像这样

你能创建一个 fiddle 或者 snippet 吗？ - l.g.karolos
4个回答
6

实现网格的响应式布局，并使用CSS样式去掉间距。

也可以指定列宽 [ width : "10%" 或 width:"100px" ]

<table id="example" class="display nowrap" cellspacing="0" width="100%">

<table id="example" class="display nowrap" cellspacing="0">

分享我的代码示例

CSHTML

<div class="row">
<div class="col-12">
    <div class="card">
        <div class="card-header">
            <h4>Customers</h4>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table  table-striped table-hover" id="tblCustomers">
                    <thead>
                        <tr>
                            <th>CustomerId</th>     
                            <th>CustomerName</th>                          
                            <th>#</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</div>

JS文件

   $('#tblCustomers').dataTable({
            "scrollX": true,        
            // other Options
            "columns": [
                { "data": "CustomerId", "title": "Customer Id", "width": "30px", "bSortable": false },
                { "data": "CustomerName", "title": "Name", "width": "250px", "bSortable": false }
            ],
            "columnDefs": [
                {
                    "render": function (data, type, row) {
                        return "<a data-customerid='" + row.CustomerId+ "' class='btn btn-primary customer-detail' href='#'>Detail</a>"
                    },
                    "targets": [2],
                    "class": "text-center",
                    "width": '70px'
                }
            ]
        });
    }
2
您只需要在表格的class中添加table-responsive即可。
0

看看这个

更改这个：

</tbody>
</tables>

变成这样

</tbody>
</table>

{{link1：fiddle}}

抱歉，我拼错了我的“表格”，还是不起作用。 - NHH
检查这个 fiddle。 - l.g.karolos
做得好，Karolos。如何将其实现/合并到我的HTML中？我完全复制了JS和CSS，但水平滚动条仍未显示出来。 - NHH
更新后的代码编辑器中已经包含了您的代码，接下来您需要导入以下库才能正常工作：https://code.jquery.com/jquery-3.2.1.min.js https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css - l.g.karolos
我已经包含了所有需要的库。如果我的<tbody>为空，则表格将正常工作。如果我通过我的数据库获取数据，则不会显示滚动条。如何使其适用于动态数据表？ - NHH
请检查答案，您必须在获取数据后初始化表格，或者您可以查看文档了解如何动态添加数据到datatables。 - l.g.karolos
0
$(document).ready(function() { 
    $('#example').DataTable( {
        "scrollY": 300,
        "scrollX": true,
        "responsive": false

    } );
} );
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接