使用引导分页显示动态内容？

Posted 2023-05-08

【中文标题】使用引导分页显示动态内容？

【英文标题】：Display dynamic contents with using bootstrap pagination?

【发布时间】：2014-09-28 03:12:36

【问题描述】：

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

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

【参考方案1】：

由于您已经使用 jQuery，因此有一个很好的速记方法，称为“加载”。

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

因为您的内容窗格具有 id content2，您可以在 page-change-event 中按如下方式使用它：

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

【参考方案2】：

这将从指定到容器#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 );
      );

    );
  );