Ajax异步刷新分页功能-MySQL
1.Servlet中代码
/** 条件Map */
Map<String, Object> map=new HashMap<String, Object>(); /** 分页配置 */
int index = request.getParameter("index")==null?1:Integer.parseInt(request.getParameter("index"));
int size=2;
map.put("index", (index-1)*size);
map.put("size", size);
/** 根据用户不同的请求进入不同的响应操作 */
String method = request.getParameter("method");
boolean mark=false;
if(method!=null){
if(method.equals("paging")){
/**执行分页操作 */
mark=true;
}
}
/** 得到用户添加到购物车中的商品集合 */
List<Entry> entrys = session.getMapper(EntryDao.class).selectUsEntry(map);
if(mark){
String entrysJson = JSONArray.fromObject(entrys).toString();
out.print(entrysJson);
return;
}
/** 得到总条数 算出总页数 */
Integer entryCount = session.getMapper(EntryDao.class).entryCount(map);
int totalPage=entryCount%size==0?entryCount/size:entryCount/size+1;
/** 响应结果 */
request.setAttribute("entrys", entrys);//得到用户的购物车
request.setAttribute("totalPage", totalPage);//总条数 /** 转发跳转 */
request.getRequestDispatcher("page/crat_page.jsp").forward(request, response);
此为JSP的代码
<body>
<table id="ver-minimalist" >
<thead>
<tr>
<th>类别</th>
<th>商品名字</th>
<th>普通价格</th>
<th>会员价格</th>
<th>数量</th>
<th>操作</th>
</tr>
</thead>
<tbody id="tbodyEntry" >
<c:forEach items="${requestScope.entrys}" var="entry" >
<tr>
<td>${entry.commodity.variety.nickName }</td>
<td>${entry.commodity.nickName }</td>
<td>${entry.commodity.ordinaryPrice }</td>
<td>${entry.commodity.memberPrice }</td>
<td>${entry.quantity }</td>
<td align="center">
<input type="button" value="删除" onclick="" />
</td>
</tr>
</c:forEach>
</tbody>
<thead>
<tr>
<th colspan="6" align="right" ><input type="button" value="结算" onclick="" /></th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="6" align="right"" width="30px" >
<input type="button" value="首页" id="firstpage" />
<input type="button" value="上页" id="beforepage" />
<input type="button" value="下页" id="nextpage" />
<input type="button" value="尾页" id="lastpage" />
<span id="index" >1</span>\<span id="totalPage" >${requestScope.totalPage}</span><!-- 此为当前页，与总页数 -->
</td>
</tr>
</tbody>
此为JQuerty的代码
/** 全局变量 */
var index = 1;
var totalPage = 0; /** 分页窗体事件 */
$(function () {
/**取从Servlect中传到JSP页面的总条数信息 给全局变量totalPage 赋值
* 下为JSP页面中显示当前页和总页数
* <span id="index" >1</span>\<span id="totalPage" >${requestScope.senior.totalPage}</span>
*/
totalPage=$("#totalPage").html();
//首页
$('#firstpage').click(function () {
if (index != 1) {
index = 1;
paging();/** 点击分页异步刷新函数 */
}
return false;
});
//尾页
$('#lastpage').click(function () {
if (index != totalPage) {
index = totalPage;
paging();
}
return false;
});
//上一页
$("#beforepage").click(function () {
if (index != 1) {
index = index - 1;
paging();
}
return false;
}); //下一页
$("#nextpage").click(function () {
if (index < totalPage) {
index = index + 1;
paging();
}
return false;
}); }) /** 点击分页 */
function paging(){
ajaxBase("cartPageServlet?method=paging","index="+index,"paging");
/** 给页面显示当前页赋值 */
$("#index").html(index);
} /** ajax函数工具类
* @param url:地址
* @param data:请求参数
* @param method:方法信号，作用判断进行什么操作
*/
function ajaxBase(url,data,method){
$.ajax({
type:'post',
url:''+url+'',
cache:false,
data:data,
dataType:'text',
success:function(result){
alert("ajax函数工具类:success");
/** 调用请求成功后的操作函数 */
success(result,method);
},
error:function(){
alert("ajax函数工具类:error");
}
});
} /** 根据method方法信号判断进行什么操作
* @param result:服务端响应的数据
* @param method:方法信号，作用判断进行什么操作
*/
function success(result,method){
if(method=="paging"){
$("#tbodyEntry").children().remove();
var result = eval("("+result+")");
var append="";
for(var rst in result){
append=append+""
+"<tr>"
+"<td>"+result[rst].commodity.variety.nickName+"</td>"
+"<td>"+result[rst].commodity.nickName+"</td>"
+"<td>"+result[rst].commodity.ordinaryPrice +"</td>"
+"<td>"+result[rst].commodity.memberPrice +"</td>"
+"<td>"+result[rst].quantity +"</td>"
+"<td align='center'>"
+"<input type='button' value='删除' onclick='javascript:alert('执行删除操作：'"+result[rst].id +")' />"
+"</td>"
+"</tr>"
}
$("#tbodyEntry").append(append);
}
}
Ajax异步刷新分页功能-MySQL的更多相关文章
- springmvc结合ajax的分页功能
var itemCount;//符合查找条件的商品总页数,分页参考 var pageIndex = 0;//当前页,默认为0 var pageSize = 8;//每页显示个数为8 //按条件查找用户 ...
- 分页功能实现之通过ajax实现表单内容刷新
拿代码来说话 我们的需求就是点击翻页功能,实现表格内容局部刷新且能够翻到对应的页面上,不明白? 那么就看看下面的图,需要达到的效果如下所示: 现在要实现的功能就是把红线框起来的表单内容 在点击翻页的时 ...
- Jquery、Ajax实现新闻列表页分页功能
前端页面官网的开发,离不开新闻列表,新闻列表一般都会有分页的功能,下面是我自己总结加查找网上资料写的一个分页的功能,记录一下. 首先,官网的开发建立在前后端分离的基础上: 再有,后端小伙伴们提供列表页 ...
- 2018.2.28 PHP中使用jQuery+Ajax实现分页查询多功能如何操作
PHP中使用jQuery+Ajax实现分页查询多功能如何操作 1.首先做主页Ajax_pag.php 代码如下 <!DOCTYPE html> <html> <head& ...
- 纯手写实现ajax分页功能
前言 最近用到了这个功能,百度大半天,网上的不是有各种问题就是需要引入其他的插件,无奈,只能自己写,大致功能已经完成.前端页面用bootstrap做样式,分页功能用ajax实现,没用其他插件哦,只引入 ...
- 原生PHP实现Mysql数据分页功能
一. 思路整理 实现一个数据分页功能,需要有数据的总条数,每页展示的条数,和当前在第几页这三个参数 通过⌈总条数/每页展示的条数⌉可以得到总页数,比如某留言板有101条留言,每页展示10条,一那就需要 ...
- PHP中使用jQuery+Ajax实现分页查询多功能操作
1.首先做主页面Ajax_pag.php 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UT ...
- java ssm框架实现分页功能 （oracle）
java web 实现分页功能 使用框架:ssm 数据库:oracle 话说 oracle 的分页查询比 mysql 复杂多了,在这里简单谈一下: 查询 前十条数据: SELECT * FROM( S ...
- jPList – 实现灵活排序和分页功能的 jQuery 插件
jPList 是一个灵活的 jQuery 插件,可以用于任何 HTML 结构的排序,分页和筛选.它支持的数据源包括:PHP + MySQL,ASP.NET + SQL Server,PHP + SQL ...
随机推荐
- ZookeeperNet太难用，写了个RetryHelper来进行配套使用
普通的zk用法,如下写法: zk.Exists("/aaa", true); zk.Create(...); 但是由于这些API会抛Zookeeper的Exception,比如Co ...
- nodejs express 框架解密3-中间件模块
本文档是基于express 3.4.6 的 在上篇中我们提到了中间件,这篇主要解释这个模块,middleware.js 为: var utils = require('./utils'); /** * ...
- Swift编程语言SequenceType协议中的一些比较有用的接口
在Swift编程语言中,大部分容器类(比如Array.Dictionary)都实现了SequenceType协议.SequenceType协议中有不少有趣且简便的方法可用来实现我们不少实际需求.这里将 ...
- OpenSSL命令---pkcs12
用途: pkcs12文件工具,能生成和分析pkcs12文件.PKCS#12文件可以被用于多个项目,例如包含Netscape. MSIE 和 MS Outlook. 用法: openssl pkcs12 ...
- Visual Studio 2013 prerequisites
http://www.visualstudio.com/zh-cn/products/visual-studio-ultimate-with-msdn-vs#Fragment_SystemRequir ...
- PHP中ob系列函数整理
ob,输出缓冲区,是output buffering的简称,而不是output cache.ob用对了,是能对速度有一定的帮助,但是盲目的加上ob函数,只会增加CPU额外的负担. 下面我说说ob的基本 ...
- Digg Reader 登录不了，原来如此
cdnjs.cloudflare.com 不能访问,你懂的,给 https://cdnjs.cloudflare.com 跟 http://cdnjs.cloudflare.com 架个梯子就可以了, ...
- SAP ECC CO 配置
SAP ECC 6.0 Configuration Document Controlling (CO) Table of Content TOC \o \h \z 1. Enterprise Stru ...
- JS - IE or not:判断是否为IE浏览器方法
问题:使用JS判断是否为IE浏览器 方法: 1.IE='\v'=='v' (失败!) if('\v'=='v') // true only in IE 2.IE=(!+"\v1" ...
- Hadoop学习笔记（老版本，YARN之前），MapReduce任务Namenode DataNode Jobtracker Tasktracker之间的关系
一.基本概念 在MapReduce中,一个准备提交执行的应用程序称为“作业(job)”,而从一个作业划分出的运行于各个计算节点的工作单元称为“任务(task)”.此外,Hadoop提供的分布式文件系统 ...