jQuery 分页与动态 <li>.

jQuery pagination with dynamic <li>

本文关键字：li 分页 动态 jQuery      更新时间：2023-09-26

我用这个插件对我的<li>进行分页：http://www.jquery4u.com/tutorials/jquery-quick-pagination-list-items/

从select选项派生的列表onchange方法。如果我更改该选项，它将根据其值生成一个列表。

这是我用来生成列表的jquery代码：

jQuery('#group').change(function() {
   var id_group = this.value; 
   var memberjson = "fetchmember.php?group="+id_group;
   jQuery.getJSON(memberjson,function(data){
     jQuery.each(data, function(i, item) {
     jQuery("#fetchmember").append("<li>"+item.name+"</li>");
     });
   }); 
});

网页代码 ：

<ul class="pagination3" id=fetchmember"></ul>

jQuery config （for paginate）

jQuery(document).ready(function() {
   jQuery("ul.pagination3").quickPagination({pagerLocation:"both",pageSize:"5"});
});

我的代码有什么问题？它不起作用，但是如果我创建静态<li>，例如：

<ul class="pagination3" id=fetchmember">
<li>ONE</li>
<li>TWO</li>
<li>THREE</li>
</ul>

分页可以很好地工作。请帮忙。

谢谢

试试这个

添加这个函数调用

$("ul.pagination3").quickPagination({pagerLocation:"both",pageSize:"5"});

然后代码将是

jQuery('#group').change(function() {
   var id_group = this.value; 
   var memberjson = "fetchmember.php?group="+id_group;
   jQuery.getJSON(memberjson,function(data){
     jQuery.each(data, function(i, item) {
     jQuery("#fetchmember").append("<li>"+item.name+"</li>");
     $("ul.pagination3").quickPagination({pagerLocation:"both",pageSize:"5"});//now we have li elements in dom so it will work
     });
   }); 
});
相关文章：