Come centrare l'impaginazione nel plugin jQuery Bootstrap DataTables?

Sto utilizzando il plug-in DataTables di jQuery con Bootstrap 3.1 per l'ordinamento del contenuto del lato server paginating &.Come centrare l'impaginazione nel plugin jQuery Bootstrap DataTables?

Ecco come il mio tavolo si presenta come

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

Impaginazione & Ordinamento funziona bene ... ma probabilmente la paginazione è sul lato destro del tavolo. Voglio mostrarlo al centro del tavolo. La mia conoscenza dei CSS è minima, quindi non sono sicuro di dove apportare modifiche. Come raggiungere questo?

fonte

2014-06-25 John Doe

non è possibile allineare esattamente il centro solo per quella parte di impaginazione. Perché il messaggio di impaginazione "Mostra da 1 a 10 di 57 voci" e l'impaginazione dividono la larghezza del 50% ciascuna. Ma puoi allinearlo nella parte sinistra. significa che dopo il 50% inizierà. –

L'ho fatto aggiungendo div.dataTables_paginate { float: inherit; margine: 0; } @Suresh Ponnukalai –

Ma per impostazione predefinita .... i datatables dividono i div in col-xs-6. Posso cambiarlo in col-xs-4 e col-xs-8 manualmente? @Suresh Ponnukalai –

inizializzare la DataTable come:

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

});

fonte

2014-06-25 06:30:41

Questo centra "Mostra da 1 a 10 di 379 voci" non è il mio div di paginazione. E anche la mia dimensione del carattere predefinito è cambiata. @Khalid T. –

Ora che hai il pieno controllo sul DOM DataTable, puoi modificare le sostituzioni CSS secondo necessità. Ad esempio, prova questo: 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>

e rimuovere la proprietà di float:right; dalla classe

dataTables_paginate

fonte

2014-06-25 07:16:47

Se siete preoccupati solo su come piazzare l'impaginazione in al centro del dataTable (sotto o abov e), il seguente codice dovrebbe farlo:

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

fonte

2015-03-17 19:29:32 user2325727

Nessuna delle soluzioni qui menzionate finora ha funzionato per me.

Questo è quello che io uso:

div.dataTables_paginate {text-align: center}

La div con la classe dataTables_paginate, nel mio layout, ha una larghezza pari al 100% del suo div contenitore. Il text-align centralizza il controllo ul - <ul class="pagination"> contenuto all'interno di dataTables_paginate.

L'attributo "DOM" è molto semplice. Ecco come si presenta:

"dom": 'rtp'

fonte

2015-05-25 19:46:11 Karl

Per cosa è "r"? Ottengo "Table"/"Paginate" – Chazt3n

elemento di visualizzazione pRocess - da [datatables.net] (https://datatables.net/reference/option/dom) – Karl

ho usato il seguente per ottenere l'impaginazione nel centro del tavolo:

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

fonte

2016-02-15 01:06:12

Questo si basa sulla risposta di Karl, ma con DataTable v1.10.12 ho dovuto fornire alcuni dettagli in più nel mio file di override CSS per farli attaccare.

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

fonte

2017-03-14 19:04:26 Kidquick

Come centrare l'impaginazione nel plugin jQuery Bootstrap DataTables?

risposta

Problemi correlati