How to use the plugin botepage ajax correctly

Asked

Viewed 56 times

0

I’m trying to use this plugin here botepage

the problem is that I am not able to insert any content inside the Divs, on page 1 for example say I want to put "hello", on page 2 say I want to put "hi" as I do to assign page 2 to div two, page 1 to div one, and so on??

follows my code

<script>
        // init bootpag
        $('#page-selection').bootpag({
            total: 10,
			page: 1
        }).on("page", function(event, /* page number here */ num){
             $("#content").html("page" + num ); // some ajax content loading...
        });
    </script>
<div id="content">

<div id="um">

<h1>ola</h1>

</div>

<div id="dois">
<h1>oi</h1>

</div>

</div>
    <div id="page-selection">Pagination goes here</div>

and here is the result of that code on my website inserir a descrição da imagem aqui

as you can see the two Ivs, appear at the same time instead of the div one, appear on page 1 and the div two appear on page 2

javascript jquery ajax html5

1 answer

1


For what I tested, Bootpag does not allow to mount paging from content previously declared in html as you did with div="one" and div="two", the loading is dynamic, just have a div region with the id "content" and another "page-Selection":

<html>
<head>
    <!-- bower:css -->
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
    <!-- endbower -->
    <!-- bower:js -->
    <script src="bower_components/jquery/dist/jquery.js"></script>
    <script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
    <script src="bower_components/bootpag/lib/jquery.bootpag.js"></script>
    <!-- endbower -->
</head>
<body>
    <div id="content"></div>
    <div id="page-selection">Pagination goes here</div>

    <script>
        // init bootpag
        $('#page-selection').bootpag({
            total: 5,
            page: 3 //Pagina inicial
        }).on("page", function(event, num){
            if(num == 1)
                $("#content").html("<h1>Olá!</h1>"); 
            else if(num == 2)
                $("#content").html("<h1>Oi!</h1>"); 
        });
    </script>
</body>
</html>

If the page is 1 displays Hello! , if the page is 2 displays Hi!. In the example I put the total pages to 5 and the initial as 3.

Browser other questions tagged javascript jquery ajax html5

You are not signed in. Login or sign up in order to post.