jQuery分页与动态< li> [英] jQuery pagination with dynamic <li>

问题描述

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

从>选择 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>）; 
}）; 
}）; 
}）; 
  

Html代码：

 < ul class =pagination3id = fetchmember>< / ul> 
  

$ j
$ b

  jQuery（document）.ready（function（）{
 jQuery （ul.pagination3）。quickPagination（{pagerLocation：both，pageSize：5}）; 
}）; 
  

我的代码出了什么问题？它不能工作，但是如果我创建静态< li> ，就像：

 < ul class =pagination3id = fetchmember> 
< li> ONE< / li> 
< li> TWO< / li> 
< li> THREE< / li> 
< / ul> 
  

分页可以正常工作。请帮忙。

谢谢

解决方案

试试这个

>

添加这个函数调用）.quickPagination（{pagerLocation： 两者，每页： 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 }）; //现在我们在dom中有li元素，所以它可以工作
}）; 
}）; 
}）; 
  

I use this plugin to paginate my <li> : http://www.jquery4u.com/tutorials/jquery-quick-pagination-list-items/

The list derived from select option with onchange method. If I change the option, it will generate a list based on it's value.

Here is the jquery code i use to generate the list :

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>");
     });
   }); 
});

Html code :

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

jQuery config (for paginate)

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

What's wrong with my code? It can't work, but if I create static <li> like :

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

The pagination can work well. Please help.

Thank you

解决方案

Try this one

Add this one your function call

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

Then code will be

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
     });
   }); 
});

这篇关于jQuery分页与动态< li>的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！