web-dev-qa-db-fra.com

Comment centrer la pagination dans le plugin jQuery Bootstrap DataTables?

J'utilise le plug-in DataTables de jQuery avec Bootstrap 3.1 pour trier et paginer le contenu du côté serveur.

Voici à quoi ressemble ma table

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

La pagination et le tri fonctionnent bien ... Mais par défaut, la pagination se trouve à droite du tableau. Je veux le montrer au centre de la table. Mes connaissances en CSS sont minimes, donc je ne sais pas où faire des changements. Comment faire ça?

jquerycsstwitter-bootstrappaginationdatatables
11
Sajeev

Initialisez votre DataTable en tant que:

$(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.

Aucune des solutions mentionnées ici n’a fonctionné pour moi.

C'est ce que j'utilise:

 div.dataTables_paginate {text-align: center}

La div avec la classe dataTables_paginate, dans ma mise en page, a une largeur égale à 100% de sa div contenant. Le text-align centre le contrôle ul - <ul class="pagination"> contenu dans dataTables_paginate.

Mon attribut "DOM" est très simple. Cela ressemble à ceci:

 "dom": 'rtp'
9
Karl

Ceci est basé sur la réponse de Karl, mais avec DataTables v1.10.12, je devais fournir quelques détails supplémentaires dans mon fichier de remplacement CSS afin de les faire adhérer.

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

J'ai utilisé les éléments suivants pour obtenir la pagination au centre de la table:

$('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>

et supprimez la propriété de float:right; de la classe 

dataTables_paginate

0
J Prakash

Cela a résolu le problème pour moi (bootstrap 4):

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

Si vous souhaitez uniquement placer la pagination au milieu du dataTable (en dessous ou au-dessus), le code suivant devrait le faire:

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