常用于列表分页器（easy-ui）

简单的分页效果。利用easy-ui的分页（pagination）

效果图.png

页面结构：（列表显示的内容，用ul的li展示）

    

            

                
1
                
2
                
3
                
4
                
5
                
6
                
7
                
8
                
9
                
10
                
11
                
12
                
13
                
14
                
15
                
16
                
17
                
18
                
19
                
20
            
        
     //控制分页的位置
    
     
 

js结构：

    $('#pp').pagination({
            total:$("li").length,
            pageSize:2,//每页显示的最大记录数
            pageList: [2,4,5,10],
            buttons: [{
                iconCls:'icon-add',
                handler:function(){alert('add')}
            },'-',{
                iconCls:'icon-save',
                handler:function(){alert('save')}
            }],
            onSelectPage:function(pageNumber, pageSize){            
                $(this).pagination('loading');  
                //alert('pageNumber:'+pageNumber+',pageSize:'+pageSize);
                $(this).pagination('loaded');
                    //pageNumber 代表当前为第几页   
                $("li").hide();
                var y;
                for(var i=(pageNumber-1) * pageSize ; i< pageNumber * pageSize ; i++){              
                    $("li").eq(i).show()                
                }
            }
        });

主要用到easy-ui分页（pagination）的属性和方法。

属性

名称	类型	描述	默认值
total	number	记录总数，应该在创建分页（pagination）时设置。	1
pageSize	number	页面尺寸。（注：每页显示的最大记录数）	2
pageNumber	number	创建分页（pagination）时显示的页码。	1
pageList	array	用户能改变页面尺寸。pageList 属性定义了能改成多大的尺寸。代码实例: pageList: [2,4,5,10]	[2,4,5,10]
buttons	array,selector	定义自定义按钮，可能的值：1、数组，每个按钮包含两个属性：iconCls：CSS class，它将显示一个背景图片handler：当按钮被点击时的处理函数2、选择器，指示按钮。 buttons: [{iconCls:'icon-add',handler:function(){alert('add')}},'-',{iconCls:'icon-save',handler:function(){alert('save')}}]	null

方法

名称	参数	描述
onSelectPage	pageNumber, pageSize	当用户选择新的页面时触发。回调函数包含两个参数：pageNumber：新的页码pageSize：新的页面尺寸 onSelectPage:function(pageNumber, pageSize){ (this).pagination('loaded'); })