引导模式中的 jQuery dataTable 溢出

Posted 2023-05-07

【中文标题】引导模式中的 jQuery dataTable 溢出

【英文标题】：jQuery dataTable overflows in bootstrap modal

【发布时间】：2014-03-22 22:47:05

【问题描述】：

我在引导模式中有一个表格。我在 dataTable 单元格中填充的内容非常大，并且没有将文本换行以适合模态内的表格，而是溢出了模态，就像它无法获取模态宽度并换行一样。

截图：

我尝试了各种解决方案，例如指定换行 CSS 以及指定表格宽度（以 % 和 px 为单位）以及在表格上设置宽度属性（以 % 和 px 为单位）但表格绝对没有变化.任何有关如何纠正此问题的建议将不胜感激。

代码提取 1（模态）：

<!-- List Questions Modal -->
<div class="modal fade" id="questionsModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog" style="width: 95%">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4>Questions</h4>
        </div>
        <div class="modal-body">
            <div class="row">
            <div class="responsive-table">
                <table  class="table table-bordered" style="margin-bottom:2em; width: 900px;" id="questionsTable">
                    <thead>
                        <tr>
                            <th >Code</th>
                            <th>Title</th>
                            <th>Instruction</th>
                            <th>Extract</th>
                            <th>class="text-center">Active</th>
                            <th class="text-center">Edit</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

代码提取 2（数据表填充）：

function showQuestions(quiz_id)

$('#questions_quiz_id').val('quiz_id');
window.questionsTable.fnClearTable();
$.post(' url("getGameQuestions") ', quiz_id : quiz_id)
.done(function(data)

    if (typeof(data.error) != 'undefined')
    
        $('#error-msg').html(data.error);
        $('#page-error').fadeIn(300).delay(2000).fadeOut(500);
    
    else
    
        for(var d in data)
        
            var question = data[d]; 
            var active = (question.active == undefined || question.active == false) ? "Inactive" : "Active";

            var ai = window.questionsTable.fnAddData([
                question.code,
                question.title,
                question.instruction,
                question.extract,
                active,
                '<i class="icon-pencil" style="cursor:pointer; color:#E48A07;" title="Edit" onclick="setQuestion('+question.id+')"></i>'
            ]);
            var oSettings = window.questionsTable.fnSettings();
            var addedRow = oSettings.aoData[ai[0]].nTr;
            addedRow.cells.item(2).setAttribute('width','29%');
            addedRow.cells.item(4).className = "text-center";
            addedRow.cells.item(4).className = "text-center";
            addedRow.cells.item(5).className = "text-center";
        
        $('#questionsModal').modal('show');
    
);

【参考方案1】：

尝试删除

<div class="responsive-table"> 可能会导致模态中的响应宽度失败。

您也可以尝试在 table 上指定 ma​​x-width。

这可能有点相关，尽管它是 Bootstrap 2.3.2 的问题，并且看起来您使用的是 3。

http://www.bootply.com/88364

【讨论】：

@Adosi：它已经在 y 上滚动了，但这不是想要的效果，Magnanimity 想要它来包裹表格内容。

【参考方案2】：

这个问题在这里问 datatables does not becomes responsive on bootstrap3 modal dialog

我建议您启用 Datatables Responsive 扩展，放弃包装并改用这个 sn-p 代码。

//once the modal has been shown
$('#yourModal').on('shown.bs.modal', function() 
           //Get the datatable which has previously been initialized
            var dataTable= $('#yourResponsiveDataTableInModal').DataTable();
            //recalculate the dimensions
            dataTable.columns.adjust().responsive.recalc();

        );

【讨论】：

非常好！这对我不起作用，直到我打开scrollX 选项。奇怪。

另外，我只使用.columns.adjust();

【参考方案3】：

在尝试了这么多解决方案后，我找到了一个适合我的解决方案！

只需将表格放在一个 div 中，并在代码中定义 CSS。

<div style="overflow:auto;">
<table>
      .....
</table>
</div>

希望对你有帮助！！

【参考方案4】：

删除<div class="row"> 并检查。 我也遇到了同样的问题，在我删除了 div 之后，我完美地解决了。

【参考方案5】：

在尝试了这么多解决方案后，我找到了解决方案。

只需将表格放在一个 div 中，并在代码中定义 CSS。

<div style="overflow:auto;">
<table>
      .....
</table>
</div>

希望对你有帮助！！

【参考方案6】：

<div class="modal-body">
    <div class="row table-responsive">
        <div class="col-sm-12">
            <table id="example" class="table table-striped table-bordered table-hover">
                <thead>
                    <tr>
                        <th class="site_name">
                            Feedback
                        </th>
                        <th>
                            Ticket Id
                        </th>
                        <th>
                            Date of Creation
                        </th>
                        <th>
                            Classification
                        </th>
                        <th>
                            Topic
                        </th>
                        <th></th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</div>

【讨论】：

试试上面的容器类。

【参考方案7】：

像这样初始化数据表 打开模态时初始化数据表。第一次打开模态时 i==1 第二次 i==2 所以数据表不能一次又一次地重新初始化，不会像数据表已经初始化一样给出任何警告框

var i=1;
$('#myModal').on('shown.bs.modal', function (e) 
if(i==1)
     var oTable=$('#questionsTable').DataTable();
 
 i++;
);  

【讨论】：

这可能是问题的解决方案，如果您解释了为什么它是一个解决方案以及它是如何工作的，这将是一个更好的答案。

打开模态时初始化数据表。第一次打开模态时 i==1 第二次 i==2 所以数据表不能一次又一次地重新初始化，不会像数据表已经初始化那样给出任何警告框

【参考方案8】：

只需将您的表格插入带有“表格响应”类的 div 中：

<div class="table-responsive">
  //Your table here
</div>