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 ...
随机推荐
- HttpURLConnection GET/POST写法
现在虽然HttpClient很好使,但也有人在用最原生的HttpURLConnection, 记录一下,备忘之. public class HttpUrlConnect { //get请求 publi ...
- 使用cocos2d-x v3.1开发小游戏（基本框架）
小游戏的组成 欢迎界面 在游戏资源未全部加载完之前就需要载入,避免进入游戏会有一段黑屏时间. 可以用来展示游戏名称或者开发者logo. 开始菜单界面 一般用于显示游戏名称和关卡选择(或者称游戏难度选择 ...
- floor相关
select floor(@f*0.22) -- 直接可显示结果 create table demo( id ,), id1 int ) select * from demo insert into ...
- MMS关键指标意义&各数值区间意义
MMS关键指标意义&各数值区间意义 What's MMS MongoDB Management Service (MMS) is a suite of services for managin ...
- 聊聊IO多路复用之select、poll、epoll详解
本文转载自: http://mp.weixin.qq.com/s?__biz=MzAxODI5ODMwOA==&mid=2666538922&idx=1&sn=e6b436ef ...
- 增大VM下linux的根目录空间
增大VM下linux的根目录空间 用的太久,发现VM下的系统空间不足.简单的方法是,分一个新硬盘,挂载到根目录下. 下面是直接增大根目录下空间: 1. 增大vm下的磁盘大小, VM -&g ...
- Ubuntu apt命令
http://www.tecmint.com/useful-basic-commands-of-apt-get-and-apt-cache-for-package-management/ apt-ca ...
- 关于windows的service编程
最近需要学习下windows的service编程框架,查了下msdn发现不知所云.于是谷歌之,发现了一个非常不错的文章,重点推荐讲的非常详细,深入,看完之后基本上就能很清楚windows的servic ...
- UNIX环境高级编程笔记之标准I/O库
一.总结 文件I/O一章讲了不带缓冲的I/O,本章讲的是带缓冲的I/O.不带缓冲针对的是内核的系统调用,而带缓冲针对的是用户空间的标准库函数,是基于带缓冲的I/O实现的.不带缓冲的I/O通过文件描述符 ...
- 微信、qq时间格式模板
产品近来蛋疼,时间格式从做完到现在改了四遍了 ,最新的要求如下: * 2分钟内 无显示 * 2分钟-24小时 HH:mm * 昨天 昨天 HH:mm * 前天 前天 HH:mm * 今年 MM:DD ...