Twitter bootstrap table de pagination

Je suis actuellement en train de travailler sur les tables dans le bootstrap. Il travaille très bien et bon. Actuellement, j'ai un problème avec la pagination. Je suis en train de pousser les données de façon dynamique dans la table, une fois les données est devenu trop grand, la table est en expansion vers le bas..Comment puis-je faire une pagination de la table?

OriginalL'auteur Aravind Cheekkallur | 2013-09-21

  1. 4

    Si vous souhaitez utiliser les tables de données avec Bootstrap, vous devez l'initialiser:

    /* Table initialisation */
$(document)
        .ready(
                function() {
                    $('.dataTable')
                            .dataTable(
                                    {
                                        "sDom" : "<'row-fluid'<'span2 offset1'l><'span4 offset1'f>r>t<'row-fluid'<'span2 offset1'i><'span6 offset1'p>>",
                                        "sPaginationType" : "bootstrap",
                                        "oLanguage" : {
                                            "sLengthMenu" : "_MENU_",
                                            "sInfo" : "_START_ /_END_  (_TOTAL_)"
                                        },
                                        //Disable sorting on the no-sort class
                                        "aoColumnDefs" : [ {
                                            "bSortable" : false,
                                            "aTargets" : [ "no-sort" ]
                                        } ]
                                    });
                });

    Puis créer la table:

     <div class="row-fluid">
  <div class="span12">
   <hr class="soften">
   <table id="rules" class="table table-hover dataTable">
    <thead>
     <tr>
      <th class="no-sort"><input id="checkboxListToggle" type="checkbox" class="markAll no-sort" /></th>
      <th>ID</th>
     </tr>
    </thead>
    <tbody>
   </tbody>
   </table>

    et n'oubliez pas d'inclure ce fichier: http://datatables.net/media/blog/bootstrap_2/DT_bootstrap.js

    Cela est basé sur le poste disponible ici

    OriginalL'auteur Paulo Fidalgo

  2. 1

    Peut-être vous devriez vérifier les tables de données du plugin Pagination (ils offrent un bootstrap de balisage) :

    http://moorberry.net/blog/datatables-twitter-bootstrap-pagination/

    Officiel Doc : http://datatables.net/plug-ins/pagination.

    L'autre moyen serait d'utiliser la fonction de patte de bootstrap (à l'envers) et de diviser votre table avec instruction conditionnelle.

    Twitter bootstrap table de pagination

    OriginalL'auteur Maikeximu