how to use the dynamic PHP ajax data with the bootpag

Question

How can I display the dynamic content of PHP with bootstrap pagination.The result is displaying using ajax call in div id 'msrResult', how to use that div in bootstrap pagination code. Here my code:

<script src="//code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="//raw.github.com/botmonster/jquery-bootpag/master /lib/jquery.bootpag.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
</head>

<div id="content2">Dynamic Content goes here</div>
<div id="page-selection">Pagination goes here</div>
<script>
$('#page-selection').bootpag({
total: 23,
page: 1,
maxVisible: 10
}).on('page', function(event, num){
$("#content2").html("Page " + num); // or some ajax content loading...
});
</script>
</body>
</html>

<div id=msrResult></div>

Answer 1

U can easily do that by this way-

$('#show_paginator').bootpag({
      total: 23,
      page: 3,
      maxVisible: 10
}).on('page', function(event, num)
{
     $("#dynamic_content").html("Page " + num); // or some ajax content loading...
});

<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://botmonster.com/jquery-bootpag/jquery.bootpag.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<div id="dynamic_content">Pagination goes here</div>
<div id="show_paginator"></div>

---

If u like to use customised version, then u can try this-

$('#show_paginator').bootpag({
       total: 53,
       page: 2,
       maxVisible: 5,
       leaps: true,
       firstLastUse: true,
       first: '←',
       last: '→',
       wrapClass: 'pagination',
       activeClass: 'active',
       disabledClass: 'disabled',
       nextClass: 'next',
       prevClass: 'prev',
       lastClass: 'last',
       firstClass: 'first'
}).on('page', function(event, num)
{
     $("#dynamic_content").html("Page " + num); // or some ajax content loading...
});

<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://botmonster.com/jquery-bootpag/jquery.bootpag.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<div id="dynamic_content">Pagination goes here</div>
<div id="show_paginator"></div>

---

If u like to use more customization, u can try this options-

---

Warning

Here I am using a CDN (http://botmonster.com/jquery-bootpag/jquery.bootpag.js) for showing content. But it is not recommanded.

Hardly recommendation is to download this file and put it locally.

Because there is no official CDN for bootpeg.

---

Even more can be found from here.

---

---

I think u have your complete answer.

Answer 2

First of all the "space" in the GitHub URL could produce 404 responses. You should delete it to get the script working ;)

Basically (as you can see at the authors website) clicking the page-buttons (they are showing up in #page-selection once the script is initialized correctly) triggers bootpag to toggle the content. In the .on() function you have the chance to place new content right before it shows up again.

In the script you've provided you write "Page X" in #content2 before it shows up. But in your case you want to load dynamic content in this div so you could do something like this:

$.ajax({
  url: "source.php?site="+num
}).done(function(data) {
  $( "#content2" ).html( data );
});

in the .on() function to load the dynamic php content in your #content2 div

Also see this JS fiddle for a demo: http://jsfiddle.net/628zL/3/