Jak wyśrodkować stronę w jQuery Bootstrap DataTables?

Używam wtyczki DataQuery jQuery z Bootstrap 3.1 do sortowania & stronicowania zawartości strony serwera.Jak wyśrodkować stronę w jQuery Bootstrap DataTables?

To jest jak moja tabela wygląda

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

Pagination & Sortowanie działa dobrze ... Ale domyślnie paginacja jest po prawej stronie tabeli. Chcę pokazać to na środku stołu. Moja wiedza w CSS jest minimalna, więc nie jestem pewien, gdzie wprowadzać zmiany. Jak to osiągnąć?

Źródło

2014-06-25 John Doe

Użytkownik nie może wyrównać dokładnie środka tylko dla tej części strony dotyczącej paginacji. Ponieważ komunikat paginacji "Wyświetlanie od 1 do 10 z 57 wpisów" i dzielenie na strony o szerokości 50% każda. Ale możesz wyrównać go po lewej stronie. oznacza to, że po 50% zacznie się. –

Zrobiłem to, dodając div.dataTables_paginate { float: inherit; margin: 0; } @Suresh Ponnukalai –

Ale domyślnie .... datatables dzieli div na col-xs-6. Czy mogę to zmienić ręcznie na col-xs-4 i col-xs-8? @Suresh Ponnukalai –

Inicjalizacja swoją DataTable jako:

$(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>>>' 
    }); 

});

Źródło

2014-06-25 06:30:41

To centrum "Pokazuje od 1 do 10 z 379 wpisów", a nie mój dział stronicowania. I zmienił się również mój domyślny rozmiar czcionki. @ Khalid T. –

Teraz, gdy masz pełną kontrolę nad DOMem DataTable, możesz w razie potrzeby zmodyfikować nadpisanie CSS. Na przykład spróbuj tego: div.dataTables_info {position: absolute; } div.dataTables_paginate {float: none; } –

<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>

i usunąć właściwość float:right; z klasy

dataTables_paginate

Źródło

2014-06-25 07:16:47

Jeśli chodzi tylko o umieszczenie paginacji w środek tabeli dataTable (pod spodem lub abov e), należy wykonać następujący kod:

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

Źródło

2015-03-17 19:29:32 user2325727

Żadne z opisanych tu rozwiązań nie sprawdziło się do tej pory.

To co mam użyć:

div.dataTables_paginate {text-align: center}

div z klasą dataTables_paginate, w moim układzie, ma szerokość równą 100% swojej zawierającego div. Obiekt text-align wyśrodkowuje element zawarty w dataTables_paginate.

Mój atrybut "DOM" jest bardzo prosty. Wygląda to tak:

"dom": 'rtp'

Źródło

2015-05-25 19:46:11 Karl

Do czego służy "r"? Otrzymuję "Tabela"/"Paginate" – Chazt3n

pRocess element wyświetlania - z [datatables.net] (https://datatables.net/reference/option/dom) – Karl

użyłem następujących dostać paginacji w środku tabeli:

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

Źródło

2016-02-15 01:06:12

ta opiera się na odpowiedź Karla, ale z DataTables v1.10.12 musiałem dostarczyć kilka dodatkowych szczegółów w moim pliku zastępowania CSS, aby je zablokować.

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

Źródło

2017-03-14 19:04:26 Kidquick

Jak wyśrodkować stronę w jQuery Bootstrap DataTables?

Odpowiedz

Powiązane problemy