zoukankan      html  css  js  c++  java
  • 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)页面标签及控件略。

  • 相关阅读:
    windows10环境运用SSH和SwitchySharp自由翱翔
    Windows10 Virtualization Technology虚拟化技术功能
    [转]docker 基本原理及快速入门
    通俗易懂介绍机器学习与深度学习的差别
    对于python setup.py install安装的包如何卸载
    在Ubuntu上安装boost库[转]
    word2vec相关资源
    ubuntu16.04 LTS Server 安装mysql phpmyadmin apache2 php5.6环境
    tmux配置与用法整理
    Oracle学习笔记:LOB大数据字段类型
  • 原文地址:https://www.cnblogs.com/boonya/p/2278583.html
Copyright © 2011-2022 走看看