如何在引导程序中使用动态PHP数据

Question

如何用引导pagination.The结果显示PHP的动态内容，在div id 'msrResult‘中显示ajax调用，如何在引导分页代码中使用该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中)触发引导以切换内容。在.on()函数中，您有机会在新内容再次出现之前放置新内容。

在您提供的脚本中，您可以在#content2中编写"Page“，然后它才会出现。但是在您的示例中，您希望在这个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

你可以通过这种方式很容易地做到-

​

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

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

​

如果你喜欢使用定制版本，你可以试试这个-

​

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

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

​

如果你想使用更多的定制，你可以试试这个选项-

​

​

警告

这里我使用一个CDN (http://botmonster.com/jquery-bootpag/jquery.bootpag.js)来显示内容。但它并没有被命令。

很难推荐下载这个文件并将其放在本地。

因为没有官方的CDN来引导。

甚至可以找到更多的从这里开始。

我想你有完整的答案。