分享一个AAU+Htmlayout 的分页代码

原创

恶猫

工作日志

2014/03/25 11:50

initData = function( flag, pageNo=1, pageSize=15 ){
 mask = wbLayout.getEle("MaskLayer");
 if(mask){
  mask.style.display="inline;";
  win.delay(1500)
 }
 var rs,rsCount = ..winform.getCashRecord( flag, pageNo, pageSize);
 var html = "";
 for(k,v in rs){
  html += '<tr class="rs">
       <td >' + v.actionTime + '</td>
       <td >' + v.bankName + '</td>
       <td >' + v.account + '</td>
       <td >' + v.amount + '</td>
       <td >' + v.state + '</td>
    </tr>';
 }
 if(mask){
  mask.style.display="none;";
 }
 wbLayout.getEle("record").innerHTML = html;
 import WebPageControl;
 wbLayout.getEle("pageControl").innerHTML = WebPageControl.showPage(pageNo,rsCount,pageSize);
}
initData(data);
wbLayout.onButtonClick = function (layoutEle,reason,behaviorParams) {
 if(layoutEle.p){
  initData(data, layoutEle.p);
 }
}

import math;
namespace WebPageControl{
 showPage = function(pageNo, rsCount, pageSize, showNum=5){
  pageCount = ..math.round(rsCount / pageSize);
  md = rsCount % pageSize;
  if(md > 0){
   pageCount += 1;
  }
  html="";
  if(tonumber(pageNo)>1 && pageCount>1){
   html = '<a href="##" p="1">首页</a><a href="" p="' + (pageNo-1) + '">上一页</a>';
  }
  else {
   html = '<a href="##" class="disabled">首页</a><a class="disabled">上一页</a>';
  }
  for(i=pageNo-showNum;pageNo+showNum;1){
   if(i>0 && i<=pageCount){
    if( i == pageNo ){
     html += '<a href="##" p="" class=current>' + i + '</a>';
    }
    else {
     html += '<a href="##" p="' + i + '">' + i + '</a>';
    }
   }
  }
  if( pageCount - (pageNo+showNum) > 3 ){
   html +=  '<a p="" class=dian>...</a>';
   for(i=pageCount-2;pageCount;1){
    html += '<a p="' + pageNo + '">' + i + '</a>';
   }
  }
  if(tonumber(pageNo) < pageCount){
   html += '<a href="##" p="' + (pageNo+1) + '">下一页</a><a href="##" p="1">尾页</a>';
  }
  else {
   html += '<a href="##" class="disabled">下一页</a><a href="##" class="disabled">尾页</a>';
  }
  //..console.log( html )
  return '<div class="pageDiv">' + html + '</div>';
 }
}

/* 分页 *//* Pager */#pageControl{

 text-align:right;border-bottom:none;height:40px;line-height:40px;

}.pageDiv{ width:100%; margin-top:10px;margin-right:15px;}.pageDiv a{

    margin-left:5px;

    color:white;

    border:1px solid #DFDFDF;

    display:block;

    width:auto;

    height:25px;

    padding:0px 5px 0px 5px;

    min-width:16px;

    text-align:center;

    line-height:25px;

    text-decoration:none;

    font-size:14px;

 behavior:button;

}.pageDiv a:hover{

    color:yellow;

    border:1px solid yellow;

    text-decoration:none;

}.pageDiv .current{

    color:#333;

    background-color:#EFEFEF;

    border:1px solid #ff6600;

}.pageDiv .dian,.pageDiv .dian:hover{

    color:#CCCCCC;

 border:1px solid rgba(0,0,0,0.1);

 font-size:12px;padding:0px;

}.pageDiv .disabled{

    color:#999;

    border:1px solid #666;

}

这个实际上是。AAu 的代码。。。。最下面是CSS，上面一个是名字空间。。。再上面是实际的调用。。。

演示就如图了。。。