Question

如何使用bootstrap分页显示PHP的动态内容。结果是在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>

Answer 1

由于你已经使用了jQuery，因此有一个很好的简写方法叫做'load'。

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

因为你的内容窗格有id内容2，所以你可以在page-change-event中使用它：

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

您不需要处理异步ajax等事件。这种速记方法可以解决问题。您所要做的就是指定要加载的内容。您可以通过网址或其他GET参数直接执行此操作。

例如，当您想要使用带有相应编号的GET参数页面时：

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

Answer 2

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

public class Upload
    {
        public int UploadId { get; set; }
        public string UploadTitle { get; set; }

        [Required]
        public string UploadURL { get; set; }

    }

使用bootstrap分页显示动态内容？

2 个答案: