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的分页功能的更多相关文章

  1. Ajax异步刷新分页功能-MySQL

    1.Servlet中代码 /** 条件Map */ Map<String, Object> map=new HashMap<String, Object>(); /** 分页配 ...

  2. SpringMVC框架下实现分页功能

    1.创建实体类Page.java @Entity public class Page { private int totalRecord;// 表示查询后一共得到多少条结果记录 private int ...

  3. 分页功能实现之通过ajax实现表单内容刷新

    拿代码来说话 我们的需求就是点击翻页功能,实现表格内容局部刷新且能够翻到对应的页面上,不明白? 那么就看看下面的图,需要达到的效果如下所示: 现在要实现的功能就是把红线框起来的表单内容 在点击翻页的时 ...

  4. Jquery、Ajax实现新闻列表页分页功能

    前端页面官网的开发,离不开新闻列表,新闻列表一般都会有分页的功能,下面是我自己总结加查找网上资料写的一个分页的功能,记录一下. 首先,官网的开发建立在前后端分离的基础上: 再有,后端小伙伴们提供列表页 ...

  5. 2018.2.28 PHP中使用jQuery+Ajax实现分页查询多功能如何操作

    PHP中使用jQuery+Ajax实现分页查询多功能如何操作 1.首先做主页Ajax_pag.php 代码如下 <!DOCTYPE html> <html> <head& ...

  6. 纯手写实现ajax分页功能

    前言 最近用到了这个功能,百度大半天,网上的不是有各种问题就是需要引入其他的插件,无奈,只能自己写,大致功能已经完成.前端页面用bootstrap做样式,分页功能用ajax实现,没用其他插件哦,只引入 ...

  7. PHP中使用jQuery+Ajax实现分页查询多功能操作

    1.首先做主页面Ajax_pag.php 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UT ...

  8. DataTables ajax + bootstrap 分页/搜索/排序/常见问题

    最近学校的网站建设需要,尝试使用了下Jquery dataTables控件,接触过C#的人都知道,C#中也含有一个DataTable,但它和我们今天讨论的东西无关 我使用的是官网最新的DataTabl ...

  9. 【jQuery 分页】jQuery分页功能的实现

    自写的jQuery实现分页功能的分页组件: 功能效果如下: 分页组件就是上图中的三部分, 分别放在表格上部  和下部 . 其中, 1>>>页面的代码如下: product.jsp 其 ...

随机推荐

  1. css设置兼容的透明样式

    css设置透明并实现兼容: <style>div{ filter: alpha(opacity=80); -moz-opacity: 0.8; -khtml-opacity: 0.8; o ...

  2. 洛谷P2832 行路难 分析+题解代码【玄学最短路】

    洛谷P2832 行路难 分析+题解代码[玄学最短路] 题目背景: 小X来到了山区,领略山林之乐.在他乐以忘忧之时,他突然发现,开学迫在眉睫 题目描述: 山区有n座山.山之间有m条羊肠小道,每条连接两座 ...

  3. 【学习笔记】Hibernate 一对一关联映射 组件映射 二级缓存 集合缓存

    啊讲道理放假这十天不到啊 感觉生活中充满了绝望 这就又开学了 好吧好吧继续学习笔记?还是什么的 一对一关联映射 这次我们仍然准备了两个表 一个是用户表Users 一个是档案表Resume 他们的关系是 ...

  4. [翻译] 编写高性能 .NET 代码--第二章 GC -- 减少大对象堆的碎片,在某些情况下强制执行完整GC,按需压缩大对象堆,在GC前收到消息通知,使用弱引用缓存对象

    减少大对象堆的碎片 如果不能完全避免大对象堆的分配,则要尽量避免碎片化. 对于LOH不小心就会有无限增长,但LOH使用的空闲列表机制可以减轻增长的影响.利用这个空闲列表,我们可以在两块分配区域中间找到 ...

  5. EL表达式判断不能为空

    前几天在做一个网站的时候遇到一个问题,要判断一个在request或者session域里面的对象是否为空,利用EL表达式,正常思维就是用 <c:if test="${* != null} ...

  6. bash文件的详细解读

    一.bash的分类 1. 按生效范围分类 全局生效 /etc/profile /etc/profile.d/*.sh /etc/bashrc 个人用户生效 ~/.bash_profile ~/.bas ...

  7. Hdfs读取文件到本地总结

    总结了一下三个方法:hdfs自带 按字节复制 按行复制 (在java io里还有字符复制,暂且不提) 因为hdfs自带的,不知道为什么有些场合不能用,每次能下载的个数还不一定,所以就考虑自己按照jav ...

  8. 浅谈 Glide - BitmapPool 的存储时机 & 解答 ViewTarget 在同一View显示不同的图片时,总用同一个 Bitmap 引用的原因

    作者:林冠宏 / 指尖下的幽灵 掘金:https://juejin.im/user/587f0dfe128fe100570ce2d8 博客:http://www.cnblogs.com/linguan ...

  9. .net mvc web api 返回 json 内容时过滤值为null的属性

    1.响应内容(过滤前) {"msg":"初始化成功!","code":"","success":tr ...

  10. 关于druid的配置说明

    <bean id="stat-filter" class="com.alibaba.druid.filter.stat.StatFilter"> & ...