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

效果图.png

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

    <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）的属性和方法。

属性

方法

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