如何使用Bootstrap分页显示动态内容？

Question

我该如何使用Bootstrap分页显示PHP的动态内容？结果使用ajax调用在div id 'msrResult'中显示，如何与Bootstrap分页代码相关联。 这是我的代码：

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

- user3829086

Answer 1

这将从指定的url中检索所需内容，并将其放入容器#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 );
      });

    });
  });

- user1428451

Answer 2

既然您已经在使用jQuery，那么有一个很好的简写方法叫做“load”。

请参见：http://api.jquery.com/load/

因为您的内容窗格具有ID content2，所以您可以在页面更改事件中按如下方式使用它：

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

对于异步Ajax等，您不需要处理事件。这个速记方法可以完成任务。您只需指定要加载的哪个内容。您可以通过URL直接执行此操作，也可以使用附加的GET参数。

例如，当您想要使用相应数字的GET参数页时：

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

- Storrm