springmvc结合ajax的分页功能
var itemCount;//符合查找条件的商品总页数,分页参考
var pageIndex = 0;//当前页,默认为0
var pageSize = 8;//每页显示个数为8
//按条件查找用户
function searchItem(pageIndex,pageSize){
//清空要append的目的位置
$('#searchItem').empty();
$('.ajax_page').empty();
var url = "${ctx}/crms/orderCenter/findItemList";
$.post(url,{"pageIndex":0,"pageSize":8},function(data){
var items = data.itemList;
var appendItem = '';
itemCount = Math.ceil(data.itemCount/8);
//查询结果所有的商品
$.each(items,function(i,result){
appendItem = "<tr class='w790 h55'><td class='w75 text-center bgc_fafafa'>"
+ "<input type='text' class='num_iid' value='"+result.numIid+"'>"
+ "<div onclick='addNumIid("+result.numIid+")' class='w20 h20 bgc_e0e6ef margin0_auto b_radius5 GXK'></div>"
+ "</td><td class='w620 bgc_fafafa'><img class='w54 h45 m_t5 m_l10 m_r20 f_l' src='"+result.url+"'><p class='w400 h55 lh55 f_l'>"+result.title+"</p></td>"
+ "<td class='w78 text-center bgc_fafafa'>"+result.price+"</td></tr>";
$('#searchItem').append(appendItem);
});
//分页
var page = '<div id="userPage" align="center" ><font size="2">共'+itemCount+'页</font><font size="2">第'
+(pageIndex+1)+'页</font> <a href="javascript:void" onclick="goToFirstPage()" id="aFirstPage" >首页</a>'
+'<a href="javascript:void" onclick="goToPrePage()" id="aPrePage">上一页</a>'
+'<a href="javascript:void" onclick="goToNextPage()" id="aNextPage">下一页</a>'
+'<a href="javascript:void" onclick="goToEndPage()" id="aEndPage">尾页</a>';
page+='</div>';
$('.ajax_page').append(page);
},'json');
};
//首页
function goToFirstPage(){
pageIndex = 0;
searchItem(pageIndex,pageSize);
}
//前一页
function goToPrePage(){
pageIndex -= 1;
pageIndex = pageIndex >= 0 ? pageIndex : 0;
searchItem(pageIndex,pageSize);
}
//后一页
function goToNextPage(){
if(pageIndex + 1 < itemCount){
pageIndex += 1;
}
searchItem(pageIndex,pageSize);
}
//尾页
function goToEndPage(){
pageIndex = itemCount -1;
searchItem(pageIndex,pageSize);
}
springmvc结合ajax的分页功能的更多相关文章
- Ajax异步刷新分页功能-MySQL
1.Servlet中代码 /** 条件Map */ Map<String, Object> map=new HashMap<String, Object>(); /** 分页配 ...
- SpringMVC框架下实现分页功能
1.创建实体类Page.java @Entity public class Page { private int totalRecord;// 表示查询后一共得到多少条结果记录 private int ...
- 分页功能实现之通过ajax实现表单内容刷新
拿代码来说话 我们的需求就是点击翻页功能,实现表格内容局部刷新且能够翻到对应的页面上,不明白? 那么就看看下面的图,需要达到的效果如下所示: 现在要实现的功能就是把红线框起来的表单内容 在点击翻页的时 ...
- Jquery、Ajax实现新闻列表页分页功能
前端页面官网的开发,离不开新闻列表,新闻列表一般都会有分页的功能,下面是我自己总结加查找网上资料写的一个分页的功能,记录一下. 首先,官网的开发建立在前后端分离的基础上: 再有,后端小伙伴们提供列表页 ...
- 2018.2.28 PHP中使用jQuery+Ajax实现分页查询多功能如何操作
PHP中使用jQuery+Ajax实现分页查询多功能如何操作 1.首先做主页Ajax_pag.php 代码如下 <!DOCTYPE html> <html> <head& ...
- 纯手写实现ajax分页功能
前言 最近用到了这个功能,百度大半天,网上的不是有各种问题就是需要引入其他的插件,无奈,只能自己写,大致功能已经完成.前端页面用bootstrap做样式,分页功能用ajax实现,没用其他插件哦,只引入 ...
- PHP中使用jQuery+Ajax实现分页查询多功能操作
1.首先做主页面Ajax_pag.php 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UT ...
- DataTables ajax + bootstrap 分页/搜索/排序/常见问题
最近学校的网站建设需要,尝试使用了下Jquery dataTables控件,接触过C#的人都知道,C#中也含有一个DataTable,但它和我们今天讨论的东西无关 我使用的是官网最新的DataTabl ...
- 【jQuery 分页】jQuery分页功能的实现
自写的jQuery实现分页功能的分页组件: 功能效果如下: 分页组件就是上图中的三部分, 分别放在表格上部 和下部 . 其中, 1>>>页面的代码如下: product.jsp 其 ...
随机推荐
- Fiddler使用简单介绍
一,fiddler简介 1.1,什么是fiddler Fiddler是一个http协议调试代理工具,它能够记录并检查所有你的电脑和互联网之间的http通讯,设置断点,查看所有的"进出&qu ...
- SDK编程之多线程编程
本课中,我们将学习如何进行多线程编程.另外我们还将学习如何在不同的线程间进行通信. 理论:前一课中,我们学习了进程,其中讲到每一个进程至少要有一个主线程.这个线程其实是进程执行的一条线索,除此主线程外 ...
- LNMP搭建环境遇到的N多坑
最近配置开发用的lnmp环境,环境配置完成后,爆500错误,查看nginx错误日志 open_basedir 将 PHP 所能打开的文件限制在指定的目录树,包括文件本身 错误日志显示,访问脚本不在 o ...
- Docker系统六:Docker网络管理
Docker网络 I. Docer的通信方式 默认情况下,Docker使用网桥(brige)+ NAT的通信模型. Docker启动时会自动创建网桥Docker0,并配置ip 172.17.0.1/1 ...
- ES磁盘分配不均问题
最近es集群磁盘空间告警,日志又没地方可以迁移,然后申请了新的服务器,一次性加入8台新的服务器 新增了32个新的数据节点,至此,我们的主集群已经到达85个数据节点的规模,整个集群数据已达到PB级别,终 ...
- ‘true’==true返回false详解
JavaScript高级程序设计(第3版) 第三章非常完整地解释了原因. 3.5.7 相等操作符 在转换不同的数据类型时,相等和不相等操作符遵循下列基本规则: . 如果有一个操作数是布尔值,则在比较 ...
- strcpy、strncpy与memcpy的区别与使用方法
strcpy.strncpy.memcpy这三个C语言函数我们在主机代码编写中会很频繁的使用到,但是三个函数的区别.使用时该注意什么还是有必要说下的. 本文参考<C 标准库>编写. 一.函 ...
- iOS的GIF动画效果实现
引言:GIF图像格式是常见的一种动态图片格式,无论是在Web端还是在移动端都经常遇到,但是考虑目前iOS还无法原生展现GIF图片,而对于GIF的原生支持暂时也没有像JPG.PNG等图像格式支持得这么全 ...
- SAS随机抽样以及程序初始环境
每每以为攀得众山小,可.每每又切实来到起点,大牛们,缓缓脚步来俺笔记葩分享一下吧,please~ --------------------------- 本来转载于SAS随机抽样 在统计研究中,针对容 ...
- Srtuts2实现登录界面(不连接数据库)
1.设计思路 (1)利用Struts2框架设计出一个登录页面的跳转,当用户名和密码都正确时, 跳到登录成功页面:否则,跳到登录失败页面,并在10秒钟内跳到登录界面: (2)在Action中判断用户名和 ...