web应用Ajax之数组分页

ajax 分页数据处理--js数组分页:
一、实现步骤:
---jsp
   1、GUI handle application
   2、edit event trigger
   3、options
   4、refresh result
---controller
   1、page parameters
   2、handle page data
   3、return data
---service/manager
   1、get entity list data
   2、return list
----------------上面这种方式有插件好办,但不是我想要的
二、分析参数:

  pageNo,pageCount,dataArray

三、处理数据
   1、pageCount-----as an entity property?//显然不是
   2、绑定事件------>页面

四、过程可能遇到问题
   1、${}无法获取到值,因为Ajax只是局部刷新,且数据只与处理的域发生关系。//错误的取值方式
   2、依赖js的时候,点击事件总是页面报错,页数++或--时发生。
   3、根据条数算出页数时求商,
     var real=7/6;
     var page=Math.round(7/6);
     if(real>page)     page++;
五、js数组分页--简单代码提示
   (1)声明全局变量
    var pageNo=1,pageCount=1,pageSize=5,pageArray=new Array();
   (2)获取json数据data
      $.ajax(url,{
        ......
        success:function(data){
            pageArray=data;
            handle(pageArray);//设置总页数
    }});
   (3)处理分页数据
      function handle(pageArray){
         if(pageArray.length>pageSize){
              var real=pageArray.length/pageSize;
              pageCount=Math.round(real);
              if(real>pageCount)  pageCount++;
           }
    }
    (4)触发分页事件后执行的函数
       function paging(option){
            if("pre"==option)pageNo--;//上一页
            if("nxt"==option)pageNo++;//下一页
            if(pageNo<1)pageNo=1;
            if(pageNo>pageCount)pageNo=pageCount;
            var count=pageArray.length-(pageNo-1)*pageSize;
            var currentArray=new Array();
            count=count>pageSize?pageSize:count;
                 var times=pageArray.length-(pageNo-1)*pageSize>pageSize?pageSize:count;
                 if(pageCount>1){
                    for(var i=0;i<times;i++){
                        var index=(pageNo-1)*pageSize-1;
                        if(pageNo==1) index=0;
                          currentArray[i]=pageArray[index+i];
                     }
                     display(currentArray);
                  }
    }
    (5)刷新页面数据
      function display(currentArray){
        if(currentArray.length>0){
            for(var i=0;i<currentArray.length;i++){
                 $('#name').html(currentArray[i].name);
                 $('#address').html(currentArray[i].address);
               .............
           }
        }   
}
    (5)页面标签及控件略。

原文地址:https://www.cnblogs.com/boonya/p/2278583.html