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 ...
随机推荐
- [aaronyang]WPF4.5 - AyTabControlBase样式分享，绝对好看
样式代码如下: 对于博客园将文章移除首页的做法:我就迁移了.文章已经迁移:http://www.ayjs.net/post/75.html 由于例子比较简单,你只要指定Style即可,难点,透明区域的 ...
- asp.net中TreeView的大数据加载速度优化
由于数据量太大,加载树时间很长,所以进行了优化 前台 .aspx <asp:Panel ID="Panel2" runat="server" Height ...
- 解决vbox下安装centos不能上网问题
由于工作需要用到Centos做服务器,使用VBOX安装Centos7系统后发现不能上网,记录解决方法,以便下次使用.找到/etc/sysconfig/network-scripts/ifcfg-enp ...
- TCP/IP 网络编程 （三）
server端未处理高并发请求通常採用例如以下方式: 多进程:通过创建多个进程提供服务 多路复用:通过捆绑并统一管理 I/O 对象提供服务 多线程:通过生成和客户端等量的线程提供服务 多进程serve ...
- 智能电表IEEE754 32位浮点格式
实例1 实例二
- LINQ TO ENTITY 根据Birthday获取Age
from emp in EmployeeInfo let years = EntityFunctions.DiffYears(emp.Birthday.Value,DateTime.Now) let ...
- hexdump—Linux系统的二进制文件查看工具
hexdump 无参: 相当于 hexdump -x 0000000 457f 464c 0102 0001 0000 0000 0000 0000 0000010 0002 003e 0001 00 ...
- 解决yum错误：Cannot retrieve repository metadata (repomd.xml) for repository
解决方法如下: # cd /etc/ #ls 找到yum.repos.d这个目录,里面有个文件CentOS-Media.repo(你的机器里也许不是这个名字,名称应该是自定义的),vi 编译一下里面的 ...
- Embeding Python & Extending Python with FFPython
Introduction ffpython is a C++ lib, which is to simplify tasks that embed Python and extend Python. ...
- keil l251 command summary --Lib
keil l251 command summaryLIB251 LIST MYLIB.LIB TO MYLIB.LST PUBLICS LIB251 EXTRACT MYLIB.LIB (GOODCO ...