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

Question

如何使用bootstrap分页显示PHP的动态内容。结果是在div id＆＃39; msrResult＆＃39;中使用ajax调用显示，如何在bootstrap分页代码中使用该div。这是我的代码：

<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

首先，GitHub URL中的“空格”可以产生404响应。您应该删除它以使脚本正常工作;）

基本上（正如您在作者网站上看到的那样）单击页面按钮（一旦脚本初始化正确，它们将显示在#page-selection中）会触发bootpag以切换内容。在.on()功能中，您可以在新内容再次显示之前将其放置。

在您提供的脚本中，您在#content2出现之前在其中写了“Page X”。但在你的情况下，你想在这个div中加载动态内容，所以你可以这样做：

$.ajax({
  url: "source.php?site="+num
}).done(function(data) {
  $( "#content2" ).html( data );
});

在.on()函数中加载#content2 div

中的动态php内容

另请参阅此JS小提琴演示：http://jsfiddle.net/628zL/3/

Answer 2

你可以通过这种方式轻松做到这一点 -

＆＃13;

＆＃13;

$('#show_paginator').bootpag({
      total: 23,
      page: 3,
      maxVisible: 10
}).on('page', function(event, num)
{
     $("#dynamic_content").html("Page " + num); // or some ajax content loading...
});

＆＃13;

<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://botmonster.com/jquery-bootpag/jquery.bootpag.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<div id="dynamic_content">Pagination goes here</div>
<div id="show_paginator"></div>

＆＃13;

＆＃13;

＆＃13;

如果你想使用自定义版本，那么你可以试试这个 -

＆＃13;

＆＃13;

$('#show_paginator').bootpag({
       total: 53,
       page: 2,
       maxVisible: 5,
       leaps: true,
       firstLastUse: true,
       first: '←',
       last: '→',
       wrapClass: 'pagination',
       activeClass: 'active',
       disabledClass: 'disabled',
       nextClass: 'next',
       prevClass: 'prev',
       lastClass: 'last',
       firstClass: 'first'
}).on('page', function(event, num)
{
     $("#dynamic_content").html("Page " + num); // or some ajax content loading...
});

＆＃13;

<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://botmonster.com/jquery-bootpag/jquery.bootpag.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<div id="dynamic_content">Pagination goes here</div>
<div id="show_paginator"></div>

＆＃13;

＆＃13;

＆＃13;

如果您想使用更多自定义功能，可以尝试使用选项 -

警告

我在这里使用CDN（http://botmonster.com/jquery-bootpag/jquery.bootpag.js）来展示内容。但不建议这样做。

很难建议下载 this file 并将其放在本地。

因为bootpeg没有正式的CDN。

可以找到更多from here。

我想你有完整的答案。