如何在div上添加jQuery框

Question

我用MySQL和PHP创建了一些div块。

我使用以下代码创建了块：

while($row = mysqli_fetch_array($result)) { 
  echo "<div>".$row['chanelname'].$row['chaneldescription']."</div>"; 
} 

现在我想知道如果在我的数据库中存储了数千个频道列表会发生什么。然后div会增加。现在我想加载所有div并一次显示10个div。我想将div放在如下的JQuery框中。我希望在我的div集合上有JQuery分页。

Answer 1

分页是一个常见的主题，这可以通过向PHP / MySQL添加逻辑，向Javascript / jQuery添加逻辑或两者的组合来解决。我确信有几个原因取决于情况以及尝试实现的目标，因此我将简单介绍一个可能的Javascript / jQuery解决方案的简化版本，而不需要插件。我确信还有几个用于分页的jQuery插件。

我首先要为你的div添加标识符，这样我们就可以为你的div获得一个很好的jQuery选择器。

<div class="channel_block">...</div>

这将允许我们选择所有这些元素并执行切片操作以获得我们想要的div元素

$channels = $(".channel_block").slice(start, start+limit);

这应该是足够的信息来处理您正在寻找的信息集，其余的可以根据您正在寻找的样式进行修改。在我的例子中，我只是为所有不相关的channel_block添加了一个隐藏类，并从我们的相关集中删除了该类。

我附上了一个小提琴，详细阐述了这个例子。重要的功能是T.showSet（）

http://jsfiddle.net/B86w9/1/

Answer 2

Simple Pagination是一个很好的插件。

你必须包含插件！

<script type="text/javascript" src="path_to/jquery.js"></script>
<script type="text/javascript" src="path_to/jquery.simplePagination.js"></script>
<link type="text/css" rel="stylesheet" href="path_to/simplePagination.css"/>

并打电话给分页。

$(function() {
    $(selector).pagination({
        items: 100,
        itemsOnPage: 10,
        cssStyle: 'light-theme'
    });
});

但是对于搜索功能，你必须将Ajax调用到php并返回结果。

希望它有用！