是否使用 Bootstrap 分页显示动态内容？

qzlgjiam 于 2022-12-08 发布在 Bootstrap

关注(0)|答案(2)|浏览(167)

我如何显示PHP的动态内容与 Bootstrap 分页。结果是显示使用div id 'msrResult'中 AJAX 调用，如何与 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>

twitter-bootstrap

来源：https://stackoverflow.com/questions/25139127/display-dynamic-contents-with-using-bootstrap-pagination

2条答案

按热度按时间

wgxvkvu91#

因为您已经使用了jQuery，所以有一个很好的简写方法叫做'load'。
请参阅：http://api.jquery.com/load/
因为您的content-pane具有id content 2，所以您可以在page-change-event中使用它，如下所示：

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

你不需要处理async AJAX 等的事件。这个简单的方法就可以了。你所要做的就是指定你想要加载的内容。你可以直接通过url或者其他的GET参数来完成。
例如，当您要使用带有相应编号的GET参数页时：

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

赞(0）回复(0）举报 2022-12-08

kpbwa7wx2#

这将从容器#msrResult中指定的url检索所需的内容。

$(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 );
      });

    });
  });

赞(0）回复(0）举报 2022-12-08

我来回答

是否使用 Bootstrap 分页显示动态内容？

2条答案

相关问题

热门标签

最新问答