JS分页的实现(同步与异步)


Posted in Javascript onSeptember 16, 2017

分页技术分为后端分页和前端分页。

前端分页

将数据一次性全部取出来,然后通过js进行分页,有其弊端:假设有商品表dbgoods,存放99999万条数据 ,执行查询语句
select *from dbgoods where 1=1 将查询结构用List<goods>list 进行接收,服务端将这么庞大的数据量传递给前端,会造成下载量大(流量都是钱),服务器压力大等。

后端分页

后端分页是每次请求只查询一页的值,以mysql为例(查询第一条开始,查询8条)

select * from dbgoods order by id limit 0,8;

后端同步分页

原理:需要有个Bean记录分页的信息,

public class PageBean{
 private long total;  //总记录数
 private List<T> list; //结果集
 private int pageNum; // 第几页
 private int pageSize; // 每页记录数
 private int pages;  // 总页数
 private int size;  // 当前页的数量 <= pageSize,该属性来自ArrayList的size属性

当我们首次加载时,加载的是第一页的分页数据:

JS分页的实现(同步与异步)

值得注意的是

以前我是这样编写sql语句得到总条数的:

select *from dbgoods ;
//用Lits<goods> lists去存储 得到的数据,如果数据有几万条,
//为了得到一个数字,去开辟这么大的空间,实属浪费
PageBean page=new PageBean();
page.setTotal=lists.size();

其实正确的打开方式是:

select count(*) from dbgoods where 1=1 ;
//查询语句返回的是一个表的总记录数,int型,
//where 1==1是为了查询搜索,做sql语句拼接

同步实现异步,从jsp界面传递currentpage参数到servlet,servlet通过request请求得到参数,通过dao层数据库查询后将数据再传会到jsp界面。

浏览器看到的界面效果是:jsp--->servlet----->jsp(跳转,用户体验不好)

如果有搜索框,在进行搜索分页时,点击搜索按钮,等到查询数据传递到jsp界面时,jsp已经是个全新的页面,搜索框里的文本框内容已经消失,解决方法就是在点击搜索的时候,将文本框的值也放在request请求,一起发给servlet,再通过servlet传递到新的jsp (超级繁琐)

JS分页的实现(同步与异步)

两种解决方法:

(1)做两个界面一样的,一个用于显示全部数据情况下的分页,当点击查询时,得到数据后用另外的页面(下一页点击事件是去执行搜索的情况)去显示

 (2)使用session:当点击搜索查询时,将搜索条件记录在session里面,当点击下一页时,去判断session的值,如果是空,则执行全部数据的下一页,如果不为空,则将session的值取出来,作为查询的条件,下一页执行 有搜索条件的查询语句。麻烦点:session的销毁不好控制,容易bug

总之,用同步实现分页,会有各种不开心

Ajax异步分页

//jsp界面一个函数,传递查询页码,绘制表格
 function InitTable(currentpage)
     {
      $.ajax({
       type:"get",
       url:"CustomServlet?type=search¤tpage="+currentpage,
       async:true,
       dataType:"json",
       success:function(data)
       {
        DrawTable(data); //绘制表格
       }
      });
     }
function DrawTable(data) //根据传递过来的json绘制表格
     {
      //给总页数赋值
      $("#custom_all").text(data.pagelist.total);
     //给当前页赋值
$("#custom_currunt_page").text(data.pagelist.pageNum);
     //给总页数赋值
 $("#custom_all_page").text(data.pagelist.pages);
      var _th="<th><input id='cb_all' type='checkbox'></th>"
      +"<th>ID</th>"
      +"<th>客户名称</th>"
      +"<th>公司名称</th>"
      +"<th>联系人</th>"
      +"<th>性别</th>"
      +"<th>联系电话</th>"
      +"<th>手机</th>"
      +"<th>QQ</th>"
      +"<th>电子邮箱</th>"
      +"<th>通讯地址</th>"
      +"<th>创建时间</th>";
      document.getElementsByTagName("tbody")[0].innerHTML=_th;
       for(var i=0;i<data.pagelist.list.length;i++)
       {
        var customerCreatetime= format(data.pagelist.list[i].customerCreatetime, 'yyyy-MM-dd');
        var _tr=document.createElement('tr');
        msg="<td><input type='checkbox'></td><td>"+data.pagelist.list[i].customerId+"</td><td>"+data.pagelist.list[i].customerName+"</td><td>"+data.pagelist.list[i].customerCompanyname+"</td><td>"+data.pagelist.list[i].customerContactname+"</td><td>"+data.pagelist.list[i].customerSex+"</td><td>"+data.pagelist.list[i].customerTelephone+"</td><td>"+data.pagelist.list[i].customerPhone+"</td><td>"+data.pagelist.list[i].customerQq+"</td><td>"+data.pagelist.list[i].customerEmail+"</td><td>"+data.pagelist.list[i].customerAddress+"</td><td>"+customerCreatetime+"</td>"
       _tr.innerHTML=msg;         
        document.getElementsByTagName("tbody")[0].appendChild(_tr);
       }
     }

初次加载时,默认调用

//初始化表格
      InitTable(1);

值得注意的是,重点来了:

我们进行搜索的时候,定义一个全局的变量mydata,作用域为page

var mydata="";

下面看下点击 搜索按钮的事件代码

btns.eq(1).click( //搜索按钮点击事件
          function()
         {
      //custom_dialog_form是搜索的form表单,将其搜索条件序列化后赋值给一个全局变量     mydata=$("#custom_dialog_form").serialize();
           $.ajax({
            type:"post",
            url:"CustomServlet?type=search¤tpage=1",
            async:true,
            dataType:"json",
            data:mydata, //传递数据
            success:function(data)
            {
             DrawTable(data);
             $("#custom_dialog").css("display","none");
            }
           });
         }
          );

解决同步的搜索情况下的下一页访问到的是全部数据的下一页问题:

function InitTable(currentpage) //无搜索条件下的查询,传递一个页码
     {
      $.ajax({
       type:"get",
       url:"CustomServlet?type=search¤tpage="+currentpage,
       async:true,
       dataType:"json",
       success:function(data)
       {
        DrawTable(data);
       }
      });
     }
     function InitTableSearch(currentpage)//有搜索添加的查询,传递页码
     {
       $.ajax({
        type:"post",
        url:"CustomServlet?type=search¤tpage="+currentpage,
        async:true,
        dataType:"json",
        data:mydata,
        success:function(data)
        {
         DrawTable(data);
         $("#custom_dialog").css("display","none");
        }
       });
     }
//下一页
      $("#custom_btn_next").click(
        function ()
        {
         var currentpage=$("#custom_currunt_page").text(); //获取页面的当前页的值
         var pages=$("#custom_all_page").text(); //获取总页数
         currentpage++;
         if(currentpage<=pages)
          {
          if(mydata=="") //判断全局变量mydata是否为空,空表示没有进行搜索查询
          {
          InitTable(currentpage);
          }
         else
          {
           InitTableSearch(currentpage); //进行条件搜索
          }
          }
        });

由于是异步刷新,所以全局变量mydata是有值的,手动自己刷新页面重新加载,mydata就会初始化为空,就又默认执行 无条件搜索语句。巧妙的解决了搜索和显示全部的下一页问题,上一页首页尾页同理。

总结

以上所述是小编给大家介绍的JS分页的实现(同步与异步),希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
在IE中调用javascript打开Excel的代码(downmoon原作)
Apr 02 Javascript
Jquery 快速构建可拖曳的购物车DragDrop
Nov 30 Javascript
JQery 渐变图片导航效果代码 漂亮
Jan 01 Javascript
放弃用你的InnerHTML来输出HTML吧 jQuery Tmpl不详细讲解
Apr 20 Javascript
js快速排序的实现代码
Dec 08 Javascript
js使用正则实现ReplaceAll全部替换的方法
Aug 22 Javascript
分析了一下JQuery中的extend方法实现原理
Feb 27 Javascript
页面内容排序插件jSort使用方法
Oct 10 Javascript
详解Javascript中的Object对象
Feb 28 Javascript
JS表单验证的代码(常用)
Apr 08 Javascript
JavaScript数组的栈方法与队列方法详解
May 26 Javascript
React Native第三方平台分享的实例(Android,IOS双平台)
Aug 04 Javascript
AngularJs 延时器、计时器实例代码
Sep 16 #Javascript
引入JavaScript时alert弹出框显示中文乱码问题
Sep 16 #Javascript
Javascript 严格模式use strict详解
Sep 16 #Javascript
ES6中Array.copyWithin()函数的用法实例详解
Sep 16 #Javascript
JS闭包的几种常见形式实例详解
Sep 16 #Javascript
ES6中Array.find()和findIndex()函数的用法详解
Sep 16 #Javascript
详解JS构造函数中this和return
Sep 16 #Javascript
You might like
将一维或多维的数组连接成一个字符串的php代码
2010/08/08 PHP
windows7下安装php的php-ssh2扩展教程
2014/07/04 PHP
ThinkPHP控制器里javascript代码不能执行的解决方法
2014/11/22 PHP
php实现JWT(json web token)鉴权实例详解
2019/11/05 PHP
JavaScript asp.net 获取当前超链接中的文本
2009/04/14 Javascript
Javascript 模式实例 观察者模式
2009/10/24 Javascript
jquery1.4 教程二 ajax方法的改进
2010/02/25 Javascript
使用JS进行目录上传(相当于批量上传)
2010/12/05 Javascript
基于jquery封装的一个js分页
2011/11/15 Javascript
javascript小数精度丢失的完美解决方法
2016/05/31 Javascript
KnockoutJS 3.X API 第四章之事件event绑定
2016/10/10 Javascript
JS实现touch 点击滑动轮播实例代码
2017/01/19 Javascript
ReactNative中使用Redux架构总结
2017/12/15 Javascript
微信小程序商品详情页的底部弹出框效果
2020/11/16 Javascript
用npm安装vue和vue-cli,并使用webpack创建项目的方法
2018/09/28 Javascript
使用mixins实现elementUI表单全局验证的解决方法
2019/04/02 Javascript
Centos7 安装Node.js10以上版本的方法步骤
2019/10/15 Javascript
python 读写中文json的实例详解
2017/10/29 Python
python贪婪匹配以及多行匹配的实例讲解
2018/04/19 Python
对python同一个文件夹里面不同.py文件的交叉引用方法详解
2018/12/15 Python
Opencv实现抠图背景图替换功能
2019/05/21 Python
python 中如何获取列表的索引
2019/07/02 Python
python模块导入的方法
2019/10/24 Python
python/Matplotlib绘制复变函数图像教程
2019/11/21 Python
Python基于time模块表示时间常用方法
2020/06/18 Python
浅谈CSS3动画的回调处理
2016/07/21 HTML / CSS
L’urv官网:精品女性运动服品牌
2019/07/07 全球购物
支部组织生活会方案
2014/06/10 职场文书
竞选班干部演讲稿500字
2014/08/20 职场文书
爱护公共设施演讲稿
2014/09/13 职场文书
2014年双拥工作总结
2014/11/21 职场文书
开场白怎么写
2015/06/01 职场文书
食品卫生管理制度
2015/08/06 职场文书
python数据库批量插入数据的实现(executemany的使用)
2021/04/30 Python
Python机器学习之KNN近邻算法
2021/05/14 Python
MySQL系列之开篇 MySQL关系型数据库基础概念
2021/07/02 MySQL