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 相关文章推荐
Javascript模块模式分析
May 16 Javascript
jQuery下的几个你可能没用过的功能
Aug 29 Javascript
JQuery动态给table添加、删除行 改进版
Jan 19 Javascript
深入理解JavaScript系列(14) 作用域链介绍(Scope Chain)
Apr 12 Javascript
THREE.JS入门教程(5)你应当知道的十件事
Jan 24 Javascript
JS 删除字符串最后一个字符的实现代码
Feb 20 Javascript
javascript正则匹配汉字、数字、字母、下划线
Apr 10 Javascript
js匿名函数的调用示例(形式多种多样)
Aug 20 Javascript
jQuery模拟新浪微博首页滚动效果的方法
Mar 11 Javascript
简单实现IONIC购物车功能
Jan 10 Javascript
详解关于React-Router4.0跳转不置顶解决方案
May 10 Javascript
vue-resource:jsonp请求百度搜索的接口示例
Nov 09 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
如何过滤高亮显示非法字符
2006/10/09 PHP
FirePHP 推荐一款PHP调试工具
2011/04/23 PHP
基于PHP常用字符串的总结(待续)
2013/06/07 PHP
在线游戏大家来找茬II
2006/09/30 Javascript
优化JavaScript脚本的性能的几个注意事项
2006/12/22 Javascript
jQuery 源代码显示控件 (Ajax加载方式).
2009/05/18 Javascript
js防止表单重复提交的两种方法
2013/09/30 Javascript
Javascript中apply、call、bind的巧妙使用
2016/08/18 Javascript
vue指令以及dom操作详解
2017/03/04 Javascript
jQuery插件FusionCharts实现的Marimekko图效果示例【附demo源码】
2017/03/24 jQuery
jQuery实现 RadioButton做必选校验功能
2017/06/15 jQuery
javascript将json格式数组下载为excel表格的方法
2017/12/22 Javascript
jQuery简单实现向列表动态添加新元素的方法示例
2017/12/25 jQuery
浅谈MUI框架中加载外部网页或服务器数据的方法
2018/01/31 Javascript
vue项目中使用百度地图的方法
2018/06/08 Javascript
vue + webpack如何绕过QQ音乐接口对host的验证详解
2018/07/01 Javascript
深入理解Vue 组件之间传值
2018/08/16 Javascript
Nuxt.js实现一个SSR的前端博客的示例代码
2019/09/06 Javascript
layui 监听select选择 获取当前select的ID名称方法
2019/09/24 Javascript
微信小程序实现滚动加载更多的代码
2019/12/06 Javascript
浅谈Vue2.4.0 $attrs与inheritAttrs的具体使用
2020/03/08 Javascript
详解Python中的条件判断语句
2015/05/14 Python
Python赋值语句后逗号的作用分析
2015/06/08 Python
一个基于flask的web应用诞生 bootstrap框架美化(3)
2017/04/11 Python
python SSH模块登录,远程机执行shell命令实例解析
2018/01/12 Python
numpy 进行数组拼接,分别在行和列上合并的实例
2018/05/08 Python
CSS3混合模式mix-blend-mode/background-blend-mode简介
2018/03/15 HTML / CSS
L’AGENCE官网:加州女装品牌
2018/06/03 全球购物
求职自荐信格式
2013/12/04 职场文书
优秀电子工程系毕业生求职信
2014/05/24 职场文书
学习张丽丽心得体会
2014/09/03 职场文书
2014年企业工会工作总结
2014/11/12 职场文书
爱晚亭导游词
2015/02/09 职场文书
小学端午节活动总结
2015/02/11 职场文书
反邪教学习心得体会
2016/01/15 职场文书
Android中View.post和Handler.post的关系
2022/06/05 Java/Android