How to use pagination in bootstrap?

Question

How to use pagination in bootstrap?

, I Am getting information from an Api and I have no idea how to paginate the information, which I show on the screen are simply titles of articles that dynamically with Jquery I am going inserting tags h4, so that I get the screen about 40 titles, what I want is paginarlo and go out for example 5 items per page, but I have no idea of using pagination. I lack the concepts, right now I have everything in one index.html

Html Code:

<body>
<!-- <div class="app"> -->
<div class="container-fluid">    
    <h1>Hello World!</h1>
    <p>Resize the browser window to see the effect.</p>
    <div class="row">
        <div class="col-xs-12 col-md-4">
            <div class="articulos">

            </div>    
                <nav aria-label="Page navigation">
                  <ul class="pagination">
                    <li>
                      <a href="#" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                      </a>
                    </li>
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li>
                      <a href="#" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                      </a>
                    </li>
                  </ul>
                </nav>
        </div>
    </div>





</div>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
    app.initialize();


    $.getJSON('https://www.llamadaapi.json', function(data) {
      var articulos = data['articles'];

        //titulo = $('h2');


        var j = 0;
        for (var i = 0; i < articulos.length; i++) {
            if (articulos[i]['lang'] == 'es') {
                $('.articulos').append("<h4/>");
                //$(titulo[j]).text(articulos[i]['title']);
                j++;    
            }
        }

        j = 0;
        titulo = $('h4');
        for (var i = 0; i < articulos.length; i++) {
            if (articulos[i]['lang'] == 'es') {

                $(titulo[j]).text(articulos[i]['title']);
                j++;
            }
        }

    });
</script>

Example of output in chrome:

1

Author: Ivan Botero, 2016-09-18

Source

1 answers

score 0 · Accepted Answer

If it is in jQuery, use this example http://www.jose-aguilar.com/blog/paginacion-jquery-ajax-php / is very simple, in this case you do it only with the label <h4>, I leave you an example code:

    <link type="text/css" href="css/styles.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {    
    $('.paginate').live('click', function(){

        $('#content').html('<div><img src="images/loading.gif" width="70px" height="70px"/></div>');

        var page = $(this).attr('data');        
        var dataString = 'page='+page;

        $.ajax({
            type: "GET",
            url: "includes/pagination.php",
            data: dataString,
            success: function(data) {
                $('#content').fadeIn(1000).html(data);
            }
        });
    });              
});    
</script>

In the controller you must send the information you want to show and divide it, you will have something like this:

<?php

require('config.php');

$query_num_services =  mysql_query("SELECT * FROM services WHERE status=1", $conexion);
$num_total_registros = mysql_num_rows($query_num_services);

//Si hay registros
 if ($num_total_registros > 0) {
    //numero de registros por página
    $rowsPerPage = 3;

    //por defecto mostramos la página 1
    $pageNum = 1;

    // si $_GET['page'] esta definido, usamos este número de página
    if(isset($_GET['page'])) {
        sleep(1);
        $pageNum = $_GET['page'];
    }

    //contando el desplazamiento
    $offset = ($pageNum - 1) * $rowsPerPage;
    $total_paginas = ceil($num_total_registros / $rowsPerPage);

    $query_services = mysql_query("SELECT service_id, title, description, rating FROM services WHERE status=1 ORDER BY date_added DESC LIMIT $offset, $rowsPerPage", $conexion);
    while ($row_services = mysql_fetch_array($query_services)) {
       //Mostramos los sevicios
       ...
    }
...
?>

You would then display the html using Echo's :

if ($total_paginas > 1) {
    echo '<div class="paginate">';
    echo '<ul>';
    if ($pageNum != 1)
        echo '<li><a data="'.($pageNum-1).'">Anterior</a></li>';
        for ($i=1;$i<=$total_paginas;$i++) {
            if ($pageNum == $i)
                //si muestro el índice de la página actual, no coloco enlace
                echo '<li><a>'.$i.'</a></li>';
            else
                //si el índice no corresponde con la página mostrada actualmente,
                //coloco el enlace para ir a esa página
                echo '<li><a data="'.$i.'">'.$i.'</a></li>';
         }
         if ($pageNum != $total_paginas)
             echo '<li><a data="'.($pageNum+1).'">Siguiente</a></li>';
         echo '</ul>';
          echo '</div>';
    }
}

And finally, where you want the information to appear in your page:

<div id="central">
   <div class="title">Artículos</div>
   <div id="content"><?php require('includes/pagination.php'); ?></div>    
</div>

Everything you have very well explained on this website also, any doubt, comment:)

Javascript jquery html5 bootstrap