分页器（easy-ui）

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

效果图.png

页面结构：

    <div>
            <ul style="list-style: none;">
                <li style="display: block;">1</li>
                <li style="display: block;">2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
                <li>7</li>
                <li>8</li>
                <li>9</li>
                <li>10</li>
                <li>11</li>
                <li>12</li>
                <li>13</li>
                <li>14</li>
                <li>15</li>
                <li>16</li>
                <li>17</li>
                <li>18</li>
                <li>19</li>
                <li>20</li>
            </ul>
        </div>
        <div id="pp" style="background:#efefef;border:1px solid #ccc;position: fixed;top: 250px;"></div>

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