当列溢出数据时，如何在jquery数据表中使单列可滚动？

Posted 2023-02-26

【中文标题】当列溢出数据时，如何在jquery数据表中使单列可滚动？

【英文标题】：How to make a single column scrollable in jquery data table when column is overflowed with data?

【发布时间】：2019-05-31 15:28:57

【问题描述】：

我使用 jquery 数据表在表中显示我的列表。但有时对于单个 id，我必须在单个列中打印多个数据。结果我的专栏变大了。因此，如果该列中的数据溢出，我想使该列可滚动。

在 Files 列中，我有多个文件用于单个列。当有多个文件时，我想让该列可滚动。可能吗？在我的 html 中，我为 jquery 表编写了 java 脚本代码是

<script>
    $(function () 
        $("#currentAcrTable").DataTable(
            "columnDefs": [

                 "targets": [1,2,3,4,5], "searchable": false ,
                 "width": "15%", "targets": 4 
            ]
        );
        $("#oldAcrTable").DataTable();
    );
</script>

而我用于迭代循环和显示数据的 html 代码是

 <tr th:each="acr : $list">
                        <td th:text="$acr.govtId" align="center"></td>
                        <td th:text="$acr.year" align="center"></td>
                        <td th:text="$acr.assigned_from" align="center"></td>
                        <td th:text="$acr.assigned_to" align="center"></td>


                        <td align="center">

                            <div class="scroll_y" style="overflow-x:hidden; overflow-y:scroll;">
                            <span th:each="file: $acr.filelist">
                                <a href=""><img th:src="@/images/pdf-icon.png"  /></a>
                            </span>
                            </div>

                        </td>
    </tr>

根据 Joseph_J 的回答，我在td 中添加了<div class="scroll_y" style="overflow-x:hidden; overflow-y:scroll;">。但是没有变化

【问题讨论】：

您只想滚动任何溢出数据的单元格？

是的！在我的表中，Files 列可能会溢出。所以我想让这个专栏只能滚动。

【参考方案1】：

在文件列中的单元格中，您可以添加一些溢出属性。

我读到表格单元格本身不能很好地处理溢出。建议您在单元格中放置一个 div，然后为 div 设置样式。

像这样：

<td>
  <div style="width:50px; height:50px; overflow-y:scroll;">To much data, this cell needs to scroll.</div>
</td>

在上面的代码中，我添加了内联样式来为 div 添加滚动属性。

您还可以创建一个包含滚动属性的 css 类。我相信您可以使用 dataTables 属性为特定列定义一个类。

CSS：

.scroll_y

  height:50px;
  width:50px;
  overflow-y: scroll;

HTML：

<td>
  <div class="scroll_y">To much data, this cell needs to scroll.</div>
</td>

希望对您有所帮助！

【讨论】：

没有得到预期的结果:(

您将 css 添加到 css 脚本并更改了 jquery。它有没有做出任何改变。 html 只是如何应用 css 的一个示例。

我使用了内联样式并在div标签内定义了class="scroll_y"

你的html是如何生成的？

解决此问题的一个非常好的方法是检查您的表。您应该能够对您的 html 进行更改，并直接从检查器查看它们如何更改您页面上的内容。然后当你得到一些有用的东西时，在你的代码中进行这些更改。

【参考方案2】：

请尝试将此样式赋予您想要滚动的 td 你可以根据你的要求给它固定的高度

style=" height:40px ;  overflow-y: scroll; display: block"

查看此链接以供参考

https://codepen.io/singhagam1/pen/MZVrrJ

【讨论】：

很抱歉进行了很多编辑，但这肯定会奏效。干杯！