Ajax分页

最新推荐文章于 2022-04-28 19:04:07 发布
最新推荐文章于 2022-04-28 19:04:07 发布
阅读量521 收藏 2
点赞数
分类专栏： 学习资料
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/imjavaxb/article/details/81290724
版权

  • Ajax分页

  • Js代码：

  •  

  • function add(){

  • var pageNumbers=$("#pageNumber").val();

  • var pageSizes=$("#pageSize").val();

  • var page=Number(pageNumbers)+Number(pageSizes);

  • var pageSum=$("#pageSum").val();

  • if(Number(page)>Number(pageSum)){

  • page=pageNumbers;

  • }

  • $("#pageNumber").val(Number(page));

  • query();

  • }

  • function adda(){

  • var pageNumbers=$("#pageNumber").val();

  • var pageSizes=$("#pageSize").val();

  • var page=Number(pageNumbers)+Number(pageSizes)+Number(pageSizes);

  • var pageSum=$("#pageSum").val();

  • if(Number(page)>Number(pageSum)){

  • page=pageNumbers;

  • }

  • $("#pageNumber").val(Number(page));

  • query();

  • }

  • function edde(){

  • var pageNumbers=$("#pageNumber").val();

  • var pageSizes=$("#pageSize").val();

  • var page=Number(pageNumbers)-Number(pageSizes)-Number(pageSizes);

  • var pageSum=$("#pageSum").val();

  • if(Number(page)>Number(pageSum)){

  • page=pageNumbers;

  • }

  • $("#pageNumber").val(Number(page));

  • query();

  • }

  • function edd(){

  • var pageNumbers=$("#pageNumber").val();

  • var pageSizes=$("#pageSize").val();

  • var page=Number(pageNumbers)-Number(pageSizes);

  • if(Number(page)<=0){

  • page=0;

  • }

  • $("#pageNumber").val(Number(page));

  • query();

  • }

  • function heads(){

  • var page=0;

  • $("#pageNumber").val(Number(page));

  • query();

  • }

  • function end(){

  • var pageSizes=$("#pageSize").val();

  • var pageSum=$("#pageSum").val();

  • var pageEnd=Number(pageSum)%Number(pageSizes);

  • var page=Number(pageSum)-Number(pageEnd);

  • if(Number(pageEnd)==0){

  • if(Number(pageSum)<=Number(pageSizes)){

  • page=0;

  • }else{

  • page=Number(pageSum)-Number(pageSizes)

  • }

  • }

  • $("#pageNumber").val(Number(page));

  • query();

  • }

  • function pageAjax(pageOrd,pageNumber,pageWin,pageSum,pageSize,pageCon,page){

  • var pageBeforBf=Number(pageOrd)-Number(1);

  • var pageBefor=Number(pageOrd);

  • var pageThe=Number(pageOrd)+Number(1);

  • var pageNext=Number(pageOrd)+Number(2);

  • var pageNextNt=Number(pageOrd)+Number(3);

  • $("#"+page).append("<h4>第"+pageThe+"页    共"+Number(pageCon)+"页</h4>");

  • $("#"+page).append("<button style='width:60px;height:30px;' οnclick='heads()'>首页</button>");

  • if(pageNumber>0){

  • $("#"+page).append("<button style='width:80px;height:30px;' οnclick='edd()'>上一页</button>");

  • }else{

  • $("#"+page).append("<button style='width:80px;height:30px;'>上一页</button>");

  • }

  • if(pageThe>2){

  • $("#"+page).append("<button style='width:60px;height:30px;' οnclick='edde()'>"+pageBeforBf+"</button>")

  • }

  • if(pageThe>1){

  • $("#"+page).append("<button style='width:60px;height:30px;' οnclick='edd()'>"+pageBefor+"</button>")

  • }

  • $("#"+page).append("<button style='width:60px;height:30px;'>"+pageThe+"</button>")

  • if(pageWin>1){

  • $("#"+page).append("<button style='width:60px;height:30px;' οnclick='add()'>"+pageNext+"</button>");

  • }

  • if(pageWin>2){

  • $("#"+page).append("<button style='width:60px;height:30px;' οnclick='adda()'>"+pageNextNt+"</button>");

  • }

  • if(Number(pageSum)-(Number(pageNumber))>Number(pageSize)){

  • $("#"+page).append("<button style='width:80px;height:30px;' οnclick='add()'>下一页</button>");

  • }else{

  • $("#"+page).append("<button style='width:80px;height:30px;'>下一页</button>");

  • }

  • $("#"+page).append("<button style='width:60px;height:30px;' οnclick='end()'>尾页</button>");

  • }

  • Jsp代码：

  • JavaScript部分：

  • $(document).ready(function(){

  • query();

  • })

  • function query(){

  • $("#page").empty();

  • var pageSize=$("#pageSize").val();

  •    var pageNumber=$("#pageNumber").val();

  • var id=getQueryString("id");

  • var search=getQueryString("search");

  • $.ajax({

  •   type: 'POST',

  •   url: "<%=request.getContextPath()%>/searchServlet",

  • data : {

  • "pageSize":pageSize,

  •    "pageNumber":pageNumber,

  • "search":search,

  • "id":id

  • },

  • dataType : "json",

  • async : false,

  • success : function(aa) {

  • tableData(aa);

  • },

  • error : function() {

  • alert("error");

  • }

  • });

  •  

  • }

  • function tableData(aa){

  • $("#search1").empty();

  • $("#image").empty();

  • $("#leixing").empty();

  • var pageNumber=$("#pageNumber").val();

  • var pageSum=aa.pageSum;

  • var pageSize=$("#pageSize").val();

  • var pageWin=(Number(pageSum)-Number(pageNumber))/Number(pageSize);

  • var pageCon=Number(pageSum)/Number(pageSize);

  • var pageOrd=Number(pageNumber)/Number(pageSize);

  • pageCon=Math.ceil(Number(pageCon));

  • $("#pageSum").val(pageSum);

  • $("#leixing").append("<span class='fl'><font color='red'>"+aa.search+"</font></span><br/>");

  • var id=getQueryString("id");

  • $("#search1").append("<dd><a href='search.jsp?id=true&search="+encodeURI(encodeURI(aa.all))+"'>全部品种</a></dd>");

  •  

  • $("#search1").append("<dd><a href='search.jsp?id=true1&search="+encodeURI(encodeURI(aa.alls))+"'>全部品牌</a></dd>");

  • if(id=="false1"||id=="true"){

  • for(var i in aa.searchList){

  • $("#search1").append("<dd><a href='search.jsp?id=false&search="+encodeURI(encodeURI(aa.searchList[i]))+"'>"+aa.searchList[i]+"</a></dd>");

  • }

  • }else{

  • for(var i in aa.searchList){

  • $("#search1").append("<dd><a href='search.jsp?id=false1&search="+encodeURI(encodeURI(aa.searchList[i]))+"'>"+aa.searchList[i]+"</a></dd>");

  • }

  • }

  • var iu=0;

  • for(var i in aa.urlList){

  • iu=1;

  • var image=aa.urlList[i]+".jpg";

  • $("#image").append("<li>"

  • +"<div class='i-pic limit'>"

  • +"<a href='introduction.jsp?search="+aa.urlList[i]+"&name="+aa.nameList[i]+"&company="+aa.companyList[i]+"&price="+aa.priceList[i]+"&allSearch="+aa.all+"'>"

  • +"<img src='../images/"+image+"' />"

  • +"<p class='title fl'>【"+aa.companyList[i]+"旗舰店】"+aa.nameList[i]+"218g 坚果炒货零食新货巴西松子包邮</p>"

  • +"<p class='price fl'>"

  • +"<b>¥</b>"

  • +"<strong>"+aa.priceList[i]+"</strong>"

  • +"</p>"

  • +"<p class='number fl'>"

  • +"销量<span>"+aa.numberList[i]+"</span>"

  • +"</p>"

  • +"</a>"

  • +"</div>"

  • +"</li>");

  • }

  • if(iu==0){

  • $("#search1").append("<br/><br/>然而并没有您所需要的商品");

  • }

  • var page="page";

  • pageAjax(pageOrd,pageNumber,pageWin,pageSum,pageSize,pageCon,page);

  • }

  •  

  • Bady部分：

  • <input type="hidden" id="pageNumber" value=0>

  •                            <input type="hidden" id="pageSize" value=12>

  •                            <input type="hidden" id="pageSum" value=0>

  •                          <ul class="am-pagination am-pagination-right" id="page">

  •                           

  •                           </ul>

  •  

  • JAVA后台代码：

  • int pageSum = new CommonDao().getPageSUm(sql, sl.getSearch().toString());

  • sql = sql + " order by id asc limit " + sl.getPageNumber() + "," + sl.getPageSize();

  • public int getPageSUm(String sql, String value) {

  • try {

  • Connection con = getConnection();

  • sql = "select count(*) from (" + sql + ") t";

  • int i = 0;

  • if (sql != null) {

  • PreparedStatement pst = con.prepareStatement(sql);

  • pst.setString(1, value);

  • pst.executeQuery();

  • ResultSet rs = pst.getResultSet();

  • while (rs.next()) {

  • i = rs.getInt(1);

  • }

  • }

  • return i;

  • } catch (Exception e) {

  • return 0;

  • }

  • }

  • 主要原理：

  • 确定分页尺寸，通过改变开始的数据id在dao层通过查询数据的开始id使用limit对数据进行对应尺寸的读取并获得总数据数来返回给jsp页面进行相应的计算以做到分页的效果，整个过程通过分页按钮触发ajax响应后台完成

My和风大福
关注
专栏目录
Ajax实现分页查询
赵大土的博客
09-23 1692
1. 项目效果图2. 实现步骤2.1 数据库环境搭建2.1.1 emp表2.1.2 dept表2.2 项目基板搭建2.2.1 目录搭建2.2.2 导包2.2.3 MybatisUtil工具类编写2.2.4 MyFilter过滤器编写2.2.5 BaseServlet编写2.2.6 基础页面index.jsp实现2.3 页面加载自动全部查询2.3.1 实体类Emp.java编写2.3.2 映射文件...
ajax分页
03-15
本篇文章将深入探讨Ajax分页的工作原理、实现方式以及相关工具。 **一、Ajax分页原理** Ajax分页的核心在于异步通信，即JavaScript通过XMLHttpRequest对象与服务器进行后台通信。当用户滚动到页面底部或点击分页...
JavaWeb-23 (AJAX实现分页)
m0_63579794的博客
04-28 314
JavaWeb-23 (AJAX实现分页)
Ajax实现数据分页功能
阿送
08-18 832
在平时网页中看电影的shiho经常看到一些情况
java ajax翻页_ajax分页怎么做？ajax入门教程
weixin_33514277的博客
02-23 422
一般来说，在项目开发中，分页是不可缺少的功能，因为数据如果都放在一个页面的话实在太过繁琐，今天，就让小编来带你们了解一下，如何使用ajax进行分页功能的实现吧。这里就用一个例子来带来大家了解分页功能这个例子是用ajax技术来实现对数据库的查询以及对查询数据进行分页，一起来看看吧。首先当然是我们的主页面代码了，这里简单定义了需要的HTML元素无标题文档.dangqian{background-co...
ThinkPHP 整合Bootstrap Ajax分页样式
12-19
ThinkPHP Ajax分页代码 publicfunction index() { $where=array(); $name = I('name'); if(!empty($name)){ $where['name']= array('like','%'.(string)$name.'%'); } $Role=M('Role'); $count= $Role->where($...
Laravel+jQuery实现AJAX分页效果
10-21
AJAX分页是一种通过异步JavaScript和XML技术实现的无需重新加载页面即可获取新数据的分页方式。Laravel是一个流行的PHP框架，jQuery则是广泛使用的JavaScript库，两者结合可以高效地实现AJAX分页。 知识点一：AJAX...
js实现ajax分页完整实例
12-09
本文实例讲述了js实现ajax分页的方法。分享给大家供大家参考，具体如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <...
ajax的分页查询（不刷新页面）
diao45615的博客
01-11 411
既然是分页查询，那么就要有张数据很多的表，可以让它进行分页显示，用普通的方法进行分页查询必然是要刷新页面的，这里要实现不刷新页面进行分页显示数据，就要用到ajax方式。进行编写代码 （1）先写个显示数据的页面，分页查询需要那几个部分呢？ 1.首先是查询的文本框输入，还有查询按钮，那么就开始写代码吧 <div> <input type="text" id="k...
ajax请求后台数据实现分页功能
07-05
ajax请求后台数据实现分页功能
纯js分页(ajax获取数据)
10-14
此工具的目的是实现网页数据分页显示完全脱离服务器，单纯使用js实现，现在功能还比较简单，只能单纯显示数据，有其他需求可以联系探讨。 工具例子使用ajax获取列表数据，当然其他形式也行，最后应该把数据转换成json格式的字符串，详见例子。
Ajax做分页
越来越好ing的博客
09-06 9200
用这种ajax做分页的方法比较简单，把代码直接复制就可以，然后根据实际更改一下里面的参数。 1.设置分页显示显示的样式，显示效果如下。 &lt;style type="text/css"&gt; *{ margin:0px auto; padding:0px; font-family:"微软雅黑"} .b3{ list-style:none; width:400px; height:30...
ajax分页效果
qq_54455551的博客
04-14 61
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .active { .
ajax，分页，include
m0_37121708的博客
04-19 325
引入bootstrap：    <**link rel=“stylesheet” href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">** ​    <**link rel=“stylesheet” href="//c...
html分页实现
CHMGG的专栏
12-04 1514
分页经常会用到，今天看到一个很好的分页，特记录下来。 转载自：点击打开链接 转自：http://www.php100.com/html/webkaifa/PHP/PHPyingyong/2012/1110/11528.html 先上效果： 实现了“首页”  " 末页 "，“上一页”，“下一页”功能。 源码： ajax分页 .pagin
AJAX实现分页效果
qq_28008529的博客
08-08 210
欢迎使用Markdown编辑器写博客 本Markdown编辑器使用StackEdit修改而来，用它写博客，将会带来全新的体验哦： Markdown和扩展Markdown简洁的语法 代码块高亮 图片链接和图片上传 LaTex数学公式 UML序列图和流程图 离线写博客 导入导出Markdown文件 丰富的快捷键 快捷键 加粗 Ctrl + B 斜体 Ctrl + I...
ajax数据获取分页
A__1Pink的博客
04-30 405
推荐使用，等更新
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值