jquery ajax分页原理

原理,传递pageid到$.get()中,取出后赋值给tbody 。

好处,你可以分开前后端样式控制。$.get()后的数据返回的是tr td 或其他的数据信息。页面的样式控制完全分离。

例子中使用了jPaginate jquery插件。其它分页插件类似,如果不嫌麻烦 可以自己写。

 

$(document).ready(function() {  
  $("#pages").paginate({ 
                count         : 2, 
                start         : 1, 
                display     : 7, 
                border                    : true, 
                border_color            : '#fff', 
                text_color              : '#fff', 
                background_color        : 'black',    
                border_hover_color        : '#ccc', 
                text_hover_color          : '#000', 
                background_hover_color    : '#fff', 
                images                    : false, 
                mouse                    : 'press', 
                onChange                 : function(page){ 
                                       $.get("assets/ajax-content.html?page="+page+"", function(html) {  
                                            //通过参数page取出所需要的数据, 将ajax数据赋值给tbody  
                                              $("table tbody").append(html);  
                                        });

                                      } 
  });

});

 

posted @ 2013-03-07 10:23  蓝海星语  阅读(583)  评论(0编辑  收藏  举报