Как центрировать разбивку на страницы в плагине jQuery Bootstrap DataTables?

ProgramBox

Как центрировать разбивку на страницы в плагине jQuery Bootstrap DataTables?

Post author:admin
Запись опубликована:29 августа, 2022
Post category:Вопросы по программированию

#jquery #css #twitter-bootstrap #pagination #datatables

#jquery #css #twitter-bootstrap #разбивка на страницы #таблицы данных

Вопрос:

Я использую плагин jQuery DataTables с Bootstrap 3.1 для сортировки и разбиения на страницы содержимого на стороне сервера.

Вот как выглядит моя таблица

http://datatables.net/manual/styling/bootstrap-simple.html

Разбивка на страницы и сортировка работают нормально…Но по умолчанию разбивка на страницы находится в правой части таблицы. Я хочу показать это в центре таблицы. Мои знания в CSS минимальны, поэтому я не уверен, где вносить изменения. Как этого добиться?

1. вы не можете выровнять точно по центру только для этой части разбивки на страницы. Потому что сообщение о разбивке на страницы «Показывает от 1 до 10 из 57 записей» и разбивка на страницы делит ширину на 50% каждая. Но вы можете выровнять его по левой стороне. это означает, что после 50% он запустится.

2. Я сделал это, добавив div.dataTables_paginate { float: inherit; margin: 0; } @Suresh Ponnukalai

3. Но по умолчанию ….datatables разделяет div на col-xs-6. Могу ли я изменить это на col-xs-4 и col-xs-8 вручную? @Suresh Ponnukalai

4. Если это фиксированный контент, мы можем играть с запасом слева минус значение. Но, как вы сказали, это динамический контент.

5. вы можете удалить его с помощью .dataTables_info{display:none}, но он удалит только текст, а не область.

Ответ №1:

Инициализируйте свой DataTable как:

 $(document).ready(function () {

    /* DataTables */
    var myTable = $("#myTable").dataTable({
        "sDom": '<"row view-filter"<"col-sm-12"<"pull-left"l><"pull-right"f><"clearfix">>>t<"row view-pager"<"col-sm-12"<"text-center"ip>>>'
    });

});

1. Это центрирует «Отображение от 1 до 10 из 379 записей», а не мой раздел на страницы. И мой размер шрифта по умолчанию также изменился. @Khalid T.

2. Теперь, когда у вас есть полный контроль над DOM с данными, вы можете изменять переопределения CSS по мере необходимости. Например, попробуйте это: div.dataTables_info { position: absolute; } div.dataTables_paginate { float: none; }

Ответ №2:

Ни одно из упомянутых здесь решений до сих пор не работало для меня.

Это то, что я использую:

  div.dataTables_paginate {text-align: center}

Класс div with dataTables_paginate в моем макете имеет ширину, равную 100% от содержащего его div. Это text-align центрирование элемента ul управления, <ul class="pagination"> содержащегося внутри dataTables_paginate .

Мой "DOM" атрибут очень прост. Это выглядит так:

  "dom": 'rtp'

Ответ №3:

Это основано на ответе Карла, но с DataTables версии v1.10.12 мне пришлось предоставить несколько дополнительных деталей в моем файле переопределения CSS, чтобы заставить их придерживаться.

 div.dataTables_info {position:absolute}
div.dataTables_wrapper div.dataTables_paginate {float:none; text-align:center}

Ответ №4:

Я использовал следующее, чтобы получить разбивку на страницы в центре таблицы:

 $('table').DataTable({
   "dom": '<"row"<"col-sm-4"l><"col-sm-4 text-center"p><"col-sm-4"f>>tip'
});

Ответ №5:

Это решило проблему для меня (bootstrap 4):

 .dataTables_paginate {
  width: 100%;
  text-align: center;
}

Ответ №6:

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

CSS

 <style>
        .dt-center .pagination {
            justify-content: center !important;
        }
</style>

DataTable

 <"dt-center"p>

Ответ №7:

 <div class="row">
   <div class="col-xs-4">
   </div>
   <div class="col-xs-8">
         <div class="dataTables_paginate paging_simple_numbers" id="example_paginate">
         </div
   </div>
</div>

и удалите свойство float:right; из класса

dataTables_paginate

Ответ №8:

Если вас интересует только размещение разбивки на страницы в середине таблицы данных (внизу или выше), это должен сделать следующий код:

 .dataTables_paginate {
    margin-top: 15px;
    position: absolute;
    text-align: right;
    left: 50%;
}

Ответ №9:

Это сработало для меня:

 <style>
.pagination{
    display: inline-flex;
}
div.dataTables_wrapper div.dataTables_paginate{
    text-align: center;
}
</style>

Ответ №10:

что я сделал: style.css строка 2731

 .dataTables_wrapper .dataTables_paginate .paginate_button {
width: 50px; //def:35px;
height: 30px; //def:35px;
border-radius: 10%; //def:50%;
background-color: #f1f1f1;
vertical-align: top;
color: #7E7E7E!important;
margin: 0 2px;
border: 0!important;
line-height: 17px; //def:21px;
box-shadow: none!important; }

число будет центрироваться посередине

1. извините, на самом деле это только делает номер разбивки на страницы в центральном поле самостоятельно.. не делайте всю область разбивки на страницы в центре.. моя ошибка.. еще раз извините..

Метки: Как центрировать разбивку на страницы в плагине jQuery Bootstrap DataTables?