JQuery Таблицы данных: не полный размер на карте - PullRequest
Новая
       55

JQuery Таблицы данных: не полный размер на карте

0 голосов
/ 05 августа 2020

Мы используем DataTables. Net на карте Bootstrap. Карта изначально свернута. Сетка как можно меньше. Мы можем исправить, выбрав размер страницы, и она расширится. Если карта не свернута, она загружается нормально. Как я могу добавить код для автоматической перезагрузки по щелчку карты или, что еще лучше, просто заставить его загружать полный размер, когда карта свернута? 

<!-- Begin: LogFile -->

    <div class="card-tools">
        <button type="button" class="btn btn-tool" data-card-widget="collapse" data-animation-speed="500"><i class="fal fa-plus"></i></button>
    </div>
</div>
<div class="card-body">
    <div class="row">
        <div class="col-sm-12">
            <table id="dataTableLogFile" class="table table-hover table-striped text-responsive nowrap" style="width: 100%;">
                <thead>
                    <tr>
                        <th>View</th>
                        <th>Category</th>
                        <th>Payload</th>
                        <th>Country</th>
                        <th>State</th>
                        <th>Postal Code</th>
                        <th>Lat/Long</th>
                        <th>Created</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</div>

Образец экрана

1 Ответ

0 голосов
/ 12 августа 2020

После множества проб и ошибок приведенная ниже программа отлично работает в каждом веб-браузере (Chrome, Edge, Firefox, Safari и т. Д. c). Кажется, это исправление, которое понадобится каждому. Ключом является hide.bs.collapse, который запускается ПОСЛЕ полного раскрытия карты. 

<script>
    $(document).ready(function () {
        $('button').on('click', (event) => {
            $('hide.bs.collapse', (event) => {
                $($.fn.dataTable.tables(true)).DataTable()
                    .columns.adjust()
                    .responsive.recalc()
                    .scroller.measure()
                    .fixedColumns().relayout();
            });
        });
    });
</script>
...