如何在bootpag中使用动态PHP ajax数据

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

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/