Display dynamic contents with using bootstrap pagination?

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 relate with 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

Since you already use jQuery, there is a nice shorthand method called 'load'.

See: http://api.jquery.com/load/

Because your content-pane hast the id content2, you can use it as follows within the page-change-event:

$('#content2').load('http://your.url.com/path/thecontent.php');

You don't need to handle events for async ajax etc. This shorthand method does the trick. All you have to do is to specify which content you want to load. You can do this directly by the url or by additional GET-parameters.

For example when you want to use the GET-parameter page with the corresponding number:

.on('page', function(event, num){
  $('#content2').load('http://your.url.com/path/thecontent.php', { page: num });
});

Answer 2

This will retrieve the content you want from the url specified into the container #msrResult.

 $(document).ready(function(){
    // init bootpag
    $('#page-selection').bootpag({
    total: 23,
    page: 1,
    maxVisible: 10
   }).on('page', function(event, num){
      $.ajax({
       url: "pageofresults?pageNumber="+num,
      }).done(function(data) {
       $("#msrResult").html( data );
      });

    });
  });