在引导模式中重绘或重新计算数据表的宽度

Posted 2023-05-08

【中文标题】在引导模式中重绘或重新计算数据表的宽度

【英文标题】：Redrawing or recalculating the width of a Datatable(s) inside a bootstrap modal

【发布时间】：2018-12-05 00:30:26

【问题描述】：

我目前在引导模式中使用Datatable。

数据表中的数据通过 ajax 来自数据库。

到目前为止，我一直在使用下面的方法在模态框内创建表格。

$('#searchModal').on('shown.bs.modal', function (e) 
 var table = $("#searchProdTable").DataTable();
 table.draw();

)

我之所以使用上面这几行代码，是因为我想防止这样的事件发生： 数据表的宽度超过模态空间的地方。

我刚刚意识到这种方法并不能始终如一地工作。目前，我已经开发了该数据表，以便它可以显示在“运行时”确定的不同数量的列。因此我猜我不应该为数据表或模态写下一个固定的宽度？或者我应该创建一个能够适应任何大小的数据表的非常大的模式吗？

html：

<div class="modal fade" id="searchModal" role="dialog">

<div class="modal-dialog modal-lg">

    <!-- Modal content-->
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Search for Inventory</h4>
        </div>
        <div class="modal-body">
            <table id="searchProdTable" class="display"></table>


        </div>

    </div>

</div>

感谢任何帮助。

【问题讨论】：

也分享你的html代码或创建js小提琴

【参考方案1】：

根据您使用的 Bootstrap 版本，如果您对模态框内的水平滚动条感到满意，那么您可以通过将 overflow-x: scroll 添加到具有 modal-body 类的元素来解决此问题。

你能分享一个代码 sn-p 和你正在使用的引导程序版本吗？

【讨论】：

我使用的boostrap版本是v3.3.7

您可以尝试将以下内容添加到您的 CSS：.modal-body overflow-x: scroll; 或者，定义一个具有上述值的新 CSS 类并将其分配给 modal-body 元素：.modal-custom-body overflow-x: scroll; <div class="modal-body modal-custom-body"> <table id="searchProdTable" class="display"></table> </div>跨度>

【参考方案2】：

这是您表中发生的情况：https://codepen.io/creativedev/pen/RJYZQQ

一种解决方案是，在表格之前添加以下 div：

<div class="table-responsive">

演示：https://codepen.io/creativedev/pen/gKdGrE

【参考方案3】：

尝试使用 DataTable api

$(function()) 
    $('#searchModal').on('shown.bs.modal', function (e) 
        $("#searchProdTable").DataTable()
                             .columns.adjust()
                             .responsive.recalc();
    );   

更多here

【讨论】：

我尝试了您的方法，数据表立即响应（单击第一列时有加号，以显示另外 2 列）。然而，即使 2 列被很好地隐藏，右侧仍有 2 列超出模态宽度。这是否意味着我应该按照其他人的建议添加水平滚动？

这意味着它也是一个CSS问题，我不是这方面的专家，但可能模态体尺寸很难计算；可能是 position 和 width/height