проблемы с позиционированием элементов данных DOM - PullRequest
Новая
       6

проблемы с позиционированием элементов данных DOM

0 голосов
/ 05 марта 2019

У меня небольшая проблема с форматированием. Это может быть потому, что я не совсем понимаю форматирование таблиц данных.

HTML код 

<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2">
<h1 class="page-header">Test Runs</h1>
<div class="table-responsive">
    <table class="table table-striped" id="tests">
        <thead>
            <tr>
            <th>#</th>
            <th>Name</th>
            <th>Link</th>
            </tr>
        </thead>
        <tbody>
            <tr>
            <td>1,001</td>
            <td>Lorem</td>
            <td>ipsum</td>
            </tr>
            <tr>
            <td>1,001</td>
            <td>Lorem</td>
            <td>ipsum</td>
            </tr>
        </tbody>
    </table>
</div>

Внешний div присутствует, потому что у меня есть боковая строка меню, которая здесь не показана.

JS код 

$(document).ready(function() {
$('#tests').DataTable( {
    dom:
        "<'row'<'col-sm-3'l><'col-sm-6 text-center'B><'col-sm-3'f>>" +
        "<'row'<'col-sm-12'tr>>" +
        "<'row'<'col-sm-3'i><'col-sm-6 text-center'B><'col-sm-3'p>>"
} );

});

В приведенном выше js-коде, если я не добавлю элемент "dom", результаты фильтра и панель поиска не будут находиться в одной строке, они будут один под другим. То же самое относится к информации и нумерации страниц.

Я хочу, чтобы четыре элемента были в четырех углах экрана. например:

  • управление изменением длины: верхний левый
  • фильтрация ввода: вверху справа
  • Сводная информация о таблице: внизу слева
  • управление разбиением на страницы: внизу справа.

С текущим кодом (с добавленной "dom") я могу добиться этого, но теперь есть горизонтальная прокрутка, которая мне не нужна.

Может кто-нибудь сказать мне, какую ошибку я совершил.

Ответы [ 2 ]

2 голосов
/ 06 марта 2019

Вы можете разместить соответствующие элементы в панели начальной загрузки.

$(document).ready(function() {
var table = $('#example').DataTable({
    "dom": '<"panel panel-default"<"panel-heading"<"row"<"col-md-6"l><"col-md-6 text-right"f>>>t<"panel-footer"<"row"<"col-md-6"i><"col-md-6 text-right"p>>>>'
}); });

Демонстрация: http://jsfiddle.net/a62hqqf9/

Вы также можете посмотреть на использование элементов DOM: datatable dom

0 голосов
/ 06 марта 2019

Основная причина горизонтальной прокрутки - отрицательные поля .row. Вы должны удалить отрицательные поля с помощью пользовательского класса. Я добавил .no-gutters в пример фрагмента, поскольку вы, вероятно, используете Bootstrap 3. Если вы используете Bootstrap 4, класс поставляется с Bootstrap CSS.

Демо: Рабочий пример

...