it-swarm.com.de

Wie zentrieren Sie die Paginierung im jQuery Bootstrap DataTables-Plugin?

Ich benutze das DataTables-Plugin von jQuery mit Bootstrap 3.1 zum Sortieren und Auslagern von serverseitigen Inhalten.

So sieht mein Tisch aus

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

Pagination & Sorting funktioniert gut ... Standardmäßig befindet sich die Paginierung jedoch auf der rechten Seite des Tisches. Ich möchte es in der Mitte des Tisches zeigen. Meine CSS-Kenntnisse sind minimal, daher bin ich mir nicht sicher, wo ich Änderungen vornehmen soll. Wie erreicht man das?

11
Sajeev

Initialisieren Sie Ihre DataTable als:

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

});
19
Khalid T.

Keine der hier genannten Lösungen funktionierte für mich.

Das ist was ich benutze:

 div.dataTables_paginate {text-align: center}

Die Variable div mit der Klasse dataTables_paginate hat in meinem Layout eine Breite, die 100% des enthaltenen div entspricht. Der text-align zentriert das ul-Steuerelement - <ul class="pagination">, das in dataTables_paginate enthalten ist.

Mein "DOM"-Attribut ist sehr einfach. Es sieht aus wie das:

 "dom": 'rtp'
9
Karl

Dies basiert auf Karls Antwort, aber mit DataTables v1.10.12 musste ich in meiner CSS-Überschreibungsdatei ein paar zusätzliche Details angeben, damit sie haften bleiben.

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

Ich habe folgendes verwendet, um die Paginierung in der Mitte des Tisches zu erhalten:

$('table').DataTable({
   "dom": '<"row"<"col-sm-4"l><"col-sm-4 text-center"p><"col-sm-4"f>>tip'
});
1
Jason Rukman
<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>

und entfernen Sie die Eigenschaft von float:right; aus der Klasse 

dataTables_paginate

0
J Prakash

Das hat bei mir funktioniert:

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

Dies hat es für mich gelöst (Bootstrap 4):

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

Wenn Sie nur daran interessiert sind, die Paginierung in der Mitte der dataTable (darunter oder darüber) zu platzieren, sollte der folgende Code dies tun:

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