jQuery dataTable在bootstrap模式中溢出

Question

我在bootstrap模式中有一個表。 我在dataTable單元格中填充的內容非常大，而不是包裝文本以適應模態內的表格，它會溢出模態，就像它無法獲取模態寬度並包裝文本一樣。

截圖：

我嘗試了各種解決方案，例如指定包裝CSS以及指定表格寬度（以％和px為單位）和在表格上設置width屬性（以％和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 width="900px" 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（dataTable人口）：

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');
    }
});
}

Answer 1

嘗試刪除

<div class="responsive-table">它可能導致模態中的響應寬度失敗。

您也可以嘗試在表格上指定最大寬度 。

雖然Bootstrap 2.3.2存在問題但看起來你使用的是3，但這可能會略有相關。

http://www.bootply.com/88364

Answer 2

這里提出這個問題， datatables在bootstrap3模態對話框中沒有響應

我建議你啟用Datatables Responsive擴展，放棄包裝並使用這段代碼代替。

//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();

        });

Answer 3

在嘗試了這么多解決方案后，我找到了一個為我工作的人！

只需將表放在div中並在代碼中定義CSS即可。

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

我希望這有幫助!!

Answer 4

刪除<div class="row">並檢查。 我也遇到了同樣的問題，在我刪除了div后，我完全理解了它。

Answer 5

在嘗試了這么多解決方案后，我找到了一個解

只需將表放在div中並在代碼中定義CSS即可。

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

我希望這有幫助!!

Answer 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>

Answer 7

初始化數據表就像初始化數據表時打開modal.first時我們打開模態i == 1秒thime i == 2所以datatble不能再次啟動再次沒有給出像datatable已經初始化的任何警告框

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

Answer 8

只需將表格插入帶有“表格響應”類的div中：

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