Перерисовка или пересчет ширины таблицы данных в модале начальной загрузки - PullRequest
Новая
       17

Перерисовка или пересчет ширины таблицы данных в модале начальной загрузки

0 голосов
/ 26 июня 2018

В настоящее время я использую Datatable в модале начальной загрузки.

Данные из таблицы данных поступают из базы данных через ajax.

До сих пор я использовал метод ниже, чтобы создать таблицу внутри модальной. 

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

})

Причина, по которой я использую приведенные выше строки кода, заключается в том, что я хочу предотвратить такое событие: Где ширина таблицы данных превышает пространство модальных.

enter image description here

Я только что понял, что этот метод не работает последовательно, хотя. В настоящее время я разработал эту таблицу данных так, чтобы она могла показывать различное количество столбцов, определенных во время выполнения. Таким образом, я предполагаю, что я не должен записывать фиксированную ширину для данных или модальных? Или я должен создать очень большой модал, способный вписаться в любой размер данных?

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>

Ценю любую помощь.

Ответы [ 3 ]

0 голосов
/ 26 июня 2018

Вот ситуация, которая происходит в вашей таблице: https://codepen.io/creativedev/pen/RJYZQQ

Решение состоит в том, чтобы добавить ниже div перед вашей таблицей: 

<div class="table-responsive">

ДЕМО: https://codepen.io/creativedev/pen/gKdGrE

0 голосов
/ 26 июня 2018

Попробуйте использовать API-интерфейс DataTable 

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

Подробнее здесь

0 голосов
/ 26 июня 2018

В зависимости от того, какую версию Bootstrap вы используете, если вы довольны наличием горизонтальной полосы прокрутки в вашем модале, вы сможете решить эту проблему, добавив overflow-x: scroll к элементу с классом modal-body.

Можете ли вы поделиться фрагментом кода и версией используемой вами начальной загрузки?

...