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

        });