簡(jiǎn)單的分頁(yè)效果。利用easy-ui的分頁(yè)（pagination）
效果圖.png
頁(yè)面結(jié)構(gòu)：（列表顯示的內(nèi)容，用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>
//控制分頁(yè)的位置
<div id="pp" style="background:#efefef;border:1px solid #ccc;position: fixed;top: 250px;">
</div>
js結(jié)構(gòu)：
$('#pp').pagination({
total:$("li").length,
pageSize:2,//每頁(yè)顯示的最大記錄數(shù)
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 代表當(dāng)前為第幾頁(yè)
$("li").hide();
var y;
for(var i=(pageNumber-1) * pageSize ; i< pageNumber * pageSize ; i++){
$("li").eq(i).show()
}
}
});
主要用到easy-ui分頁(yè)（pagination）的屬性和方法。
屬性
| 名稱 | 類型 | 描述 | 默認(rèn)值 |
|---|---|---|---|
| total | number | 記錄總數(shù)，應(yīng)該在創(chuàng)建分頁(yè)（pagination）時(shí)設(shè)置。 | 1 |
| pageSize | number | 頁(yè)面尺寸。（注：每頁(yè)顯示的最大記錄數(shù)） | 2 |
| pageNumber | number | 創(chuàng)建分頁(yè)（pagination）時(shí)顯示的頁(yè)碼。 | 1 |
| pageList | array | 用戶能改變頁(yè)面尺寸。pageList 屬性定義了能改成多大的尺寸。代碼實(shí)例: pageList: [2,4,5,10]
|
[2,4,5,10] |
| buttons | array,selector | 定義自定義按鈕，可能的值：1、數(shù)組，每個(gè)按鈕包含兩個(gè)屬性：iconCls：CSS class，它將顯示一個(gè)背景圖片handler：當(dāng)按鈕被點(diǎn)擊時(shí)的處理函數(shù)2、選擇器，指示按鈕。 buttons: [{iconCls:'icon-add',handler:function(){alert('add')}},'-',{iconCls:'icon-save',handler:function(){alert('save')}}]
|
null |
方法
| 名稱 | 參數(shù) | 描述 |
|---|---|---|
| onSelectPage | pageNumber, pageSize | 當(dāng)用戶選擇新的頁(yè)面時(shí)觸發(fā)?；卣{(diào)函數(shù)包含兩個(gè)參數(shù)：pageNumber：新的頁(yè)碼pageSize：新的頁(yè)面尺寸 onSelectPage:function(pageNumber, pageSize){ |
