How to use the aotext botepage plugin correctly

Question

How to use the aotext botepage plugin correctly

Navigation

#1 by (1 votes)

0

I'm trying to use this plugin here botepage

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

follow 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 this code on my site

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

javascript jquery html5 ajax

asked by anonymous 02.10.2017 / 23:30

1 answer

Error in site after server change Date subtraction today - initial date in PHP and bring result eg: 1 day 5hs and 25min [duplicate]

score 1 · Accepted Answer

As I tested it, Bootpag does not allow you to mount paging from previously declared content in html like you did with div="one" and div="two", loading is dynamic, just having 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, it displays Hi! if the page is 2 it displays Hi !. In the example I put the page total to 5 and the initial page to 3.