宝哥软件园

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

编辑:宝哥软件园 来源:互联网 时间:2021-09-03

寻呼技术分为后端寻呼和前端寻呼。

前端分页

一次取出所有数据,然后通过js分页,有它的缺点:假设有一个商品表dbgoods,里面存储了999.99万条数据,执行查询语句select *from dbgoods其中1=1,用Listgoodslist接收查询结构,服务器会把这么庞大的数据量传递到前端,会造成下载量大(所有流量都是钱),服务器压力大等。

后端分页

后端分页是每个请求只查询一页值,以mysql为例(查询第一页,查询八)

按id限制0,8从dbgoods订单中选择*;后端同步寻呼

原理:一个Bean需要记录分页信息。

公共类PageBean { private long total//总记录私人列表;//结果集私有int pageNum//私有int pageSize的页码;//每页记录私有int页;//总页面私有int大小;//当前页数=pageSize,来自ArrayList的Size属性。当我们第一次加载它时,我们加载了第一页的分页数据:

值得注意的是

我曾经这样写sql语句来得到总数:

从dbgoods中选择*;//使用Litsgoods列表存储获得的数据。如果有几万条数据,//为了得到一个数字而开辟这么大的空间,是浪费page bean page=new page bean();page . settotal=list . size();事实上,正确的打开方式是:

从dbgoods中选择count(*),其中1=1;//查询语句返回一个表的总记录数,类型为int。//其中1==1用于查询和搜索。sql语句拼接同步实现异步,currentpage参数从jsp接口传递到servlet。servlet通过请求请求获取参数,然后通过dao层数据库查询后将数据传输到jsp接口。

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

如果有搜索框,请在分页时单击“搜索”按钮。当查询数据传递到jsp界面时,jsp是一个全新的页面,搜索框中文本框的内容已经消失。解决方法是在点击Search时将文本框的值放在请求请求中,一起发送给servlet,然后通过servlet传递给新的jsp(超级麻烦)

两种解决方案:

(1)使两个界面相同,一个用于显示所有数据情况下的分页。当您单击查询时,数据将显示在另一页上(下一页单击事件是执行搜索)

(2)使用会话:点击搜索查询时,在会话中记录搜索条件;当你点击下一页时,判断会话的价值;如果为空,则执行下一页的所有数据;如果不为空,则取出session的值作为查询条件,在下一页执行带有搜索条件的query语句。麻烦:会话的破坏不容易控制,容易出错

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

Ajax异步分页

//jsp界面一个函数,传递查询页码,绘制表格函数InitTable(currentpage) { $ .ajax({ type:'get ',url:'CustomServlet?type=search current page=' current page,async:true,dataType:'json ',success : function(data){ draw table(data);//绘制表格} });}函数可绘制的(数据)//根据传递过来的json绘制表格{ //给总页数赋值$('#custom_all ').文本(数据。页面列表。合计);//给当前页赋值$(' # custom _ current _ page ').文本(数据。页面列表。页码);//给总页数赋值$('#custom_all_page ').文本(数据。页面列表。页面);var _ th=' thin put id=' CB _ all ' type=' checkbox '/th ' ' THid/th ' ' th客户名称/th' 'th公司名称/th' 'th联系人/th' 'th性别/th' 'th联系电话/th' 'th手机/th' 'thQQ/th' 'th电子邮箱/th' 'th通讯地址/th' 'th创建时间/th ';文件。getelementsbytagname(' t body '[0]).innerHTML=_ thfor(var I=0;伊达塔。页面列表。名单。长度;I){ var客户创建时间=格式(数据。页面列表。清单1 .customerCreatetime,' yyyy-MM-DD ');var _ tr=文档。创建元素(' tr ');msg=' TD输入类型=' checkbox '/tdtd '数据。页面列表。清单1 .customerId/tdtd '数据。页面列表。清单1 .customerName/' tdtd '数据。页面列表。清单1 .customercompany name/' tdtd '数据。页面列表。清单1 .客户联系人姓名/“tdtd”数据。页面列表。清单1 .customerSex '/tdtd '数据。页面列表。清单1 .customerTelephone/' tdtd '数据。页面列表。清单1 .customername/' tdtd '数据。页面列表。清单1 .customerQq '/tdtd '数据。页面列表。清单1 .customer mail '/tdtd '数据。页面列表。清单1 .customer address '/tdtd '客户创建时间'/TD ' _ tr。innerhtml=msg文件。getelementsbytagname(' t body '[0]).appendChild(_ tr);} }初次加载时,默认调用

//初始化表格初始化表(1);值得注意的是,重点来了:

我们进行搜索的时候,定义一个全局的变量我的数据,作用域为页,面,张,版

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

btns.eq(1).单击(//搜索按钮点击事件function(){//custom _ dialog _ form是搜索的形式表单,将其搜索条件序列化后赋值给一个全局变量mydata=$('#custom_dialog_form ').serialize();$.ajax({ type:'post ',url:'CustomServlet?type=searchcurrentpage=1 ',async:true,dataType:'json ',data:mydata,//传递数据成功:函数(数据){ DrawTable(数据);$(“# custom _ dialog”).css('display ',' none ');} });} );解决同步的搜索情况下的下一页访问到的是全部数据的下一页问题:

函数inittable(当前页)//无搜索条件查询,传递页码{$。Ajax ({type :' get ',URL : '自定义servlet?type=search current page=' current page,async:true,dataType:'json ',success : function(data){ draw table(data);} });}函数init table search(current page)//有一个由search添加的查询,以及页码{$。Ajax ({type:' post ',url:' customservlet?type=search current page=' current page,async:true,dataType:'json ',data:mydata,success : function(data){ draw table(data);$('#custom_dialog ')。css('display ',' none ');} });}//Next $ ('# custom _ BTN _ next ')。单击(function(){ var current page=$(' # custom _ current _ page ')。text();//获取页面var pages的当前页面的值=$ ('# custom _ all _ page ')。text();//获取当前页面的总页数;if(current page=pages){ if(mydata==' ')//判断全局变量my data是否为空,如果为空则表示没有进行过搜索查询{ init table(current page);} else { InitTableSearch(current page);//进行条件搜索} });因为是异步刷新,所以全局变量mydata有一个值。如果手动刷新页面并重新加载,mydata将被初始化为null,默认情况下将执行无条件搜索语句。巧妙地解决了搜索和显示所有下一页的问题,第一页的最后一页也是如此。

摘要

以上是边肖介绍的JS分页(同步和异步)的实现。希望对大家有帮助。如果你有任何问题,请给我留言,边肖会及时回复你的!

更多资讯
游戏推荐
更多+