Wie zentriert man die Seitenumbruch in jQuery Bootstrap DataTables Plugin?

Ich benutze jQuery DataTables-Plugin mit Bootstrap 3.1 zum Sortieren & paginierenden Server Seiteninhalte. DieseWie zentriert man die Seitenumbruch in jQuery Bootstrap DataTables Plugin?

ist, wie mein Tisch

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

Paginierung & Sortierung funktioniert wie

sieht ... Aber standardmäßig Paginierung ist auf der rechten Seite der Tabelle. Ich möchte es in der Mitte des Tisches zeigen. Meine Kenntnisse in CSS sind minimal, daher bin ich mir nicht sicher, wo ich Änderungen vornehmen soll. Wie erreiche ich das?

Quelle

2014-06-25 John Doe

Sie können nicht genau ausrichten genau für diesen Seitenumbruch Teil nur. Weil die Paginierungsnachricht "Zeige 1 bis 10 von 57 Einträgen" und Seitenumbruch die Breite jeweils 50% teilt. Aber Sie können es auf der linken Seite ausrichten. es bedeutet nach 50% wird es beginnen. –

Ich habe das getan, indem ich div.dataTables_paginate { float: inerit; Rand: 0; } @Suresh Ponnukalai –

Aber standardmäßig ... teilt datatables die divs in col-xs-6. Kann ich das manuell in col-xs-4 & col-xs-8 ändern? @Suresh Ponnukalai –

initialisieren Ihre Datentabelle 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>>>' 
    }); 

});

Quelle

2014-06-25 06:30:41

Dies zentriert "Zeige 1 bis 10 von 379 Einträgen" nicht meine Paginierung Div. Und meine Standardschriftgröße hat sich ebenfalls geändert. @ Khalid T. –

Jetzt, da Sie die vollständige Kontrolle über das DataTable-DOM haben, können Sie Ihre CSS-Überschreibungen bei Bedarf ändern. Versuchen Sie beispielsweise Folgendes: div.dataTables_info {position: absolute; } div.dataTables_paginate {float: keine; } –

<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 die Eigenschaft float:right; von Klasse

dataTables_paginate

Quelle

2014-06-25 07:16:47

entfernen Wenn Sie nur besorgt über die Paginierung Platzierung in die Mitte der Datentabelle (unter oder abov e), der folgende Code sollte es tun:

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

Quelle

2015-03-17 19:29:32 user2325727

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

ist das, was ich benutze:

div.dataTables_paginate {text-align: center}

Die div mit der Klasse dataTables_paginate, in meinem Layout, hat eine Breite, die gleich 100% seines enthält div. Die text-align zentriert die ul Kontrolle - <ul class="pagination"> enthalten innerhalb dataTables_paginate.

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

"dom": 'rtp'

Quelle

2015-05-25 19:46:11 Karl

Für was ist das "r"? Ich bekomme "Table"/"Paginate" – Chazt3n

pRocess Anzeigeelement - aus [datatables.net] (https://datatables.net/reference/option/dom) – Karl

habe ich die folgende Paginierung in der Mitte des Tisches zu bekommen:

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

Quelle

2016-02-15 01:06:12

Dies basiert auf Karls Antwort, aber mit Tables v1.10.12 Ich hatte zu schaffen ein paar zusätzliche Details in meiner CSS-Override-Datei, um sie zu halten.

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

Quelle

2017-03-14 19:04:26 Kidquick

Wie zentriert man die Seitenumbruch in jQuery Bootstrap DataTables Plugin?

Antwort

Verwandte Themen