jquery.pagination.js分页使用教程


Posted in jQuery onOctober 23, 2018

简单介绍一下在动态网页里面的jquery.pagination.js分页的使用,具体内容如下

添加下载的js和样式,主要是先添加jquery.js 再添加jquery.pagination.js,我这是下载好的,放在本地

<link rel="stylesheet" href="<%=path%>css/pagination.css" type="text/css">
<script type="text/javascript" src="<%=path%>js/jquery-1.11.3.js"></script>
<script type="text/javascript" src="<%=path%>js/jquery.pagination.js"></script>

表格,用的是c标签,获取控制器传过来的值

<table width="1052" border=0 align=center cellpadding=2 cellspacing=1
   bordercolor="#799AE1" class=tableBorder>
   <tbody>
    <tr>
     <th align=center colspan=16 style="height: 23px">商品显示</th>
    </tr>

    <tr align="center" bgcolor="#799AE1" style="height:28px">
     <td width="10%" align="center" class=txlHeaderBackgroundAlternate>商品编号</td>
     <td width="10%" align="center" class=txlHeaderBackgroundAlternate>商品大类</td>
     <td width="10%" align="center" class=txlHeaderBackgroundAlternate>商品名称</td>
     <td width="10%" align="center" class=txlHeaderBackgroundAlternate>商品规格</td>
     <td width="10%" align="center" class=txlHeaderBackgroundAlternate>加权进价</td>
     <td width="10%" align="center" class=txlHeaderBackgroundAlternate>当前售价</td>
     <td width="10%" align="center" class=txlHeaderBackgroundAlternate>操作</td>

    </tr>


    <c:forEach items="${goodsS}" var="goods">
     <tr bgcolor="#DEE5FA">
      <td align="center" id="goodsId" class="txlrow"><c:out
        value="${goods.goodsId}"></c:out></td>
      <td align=center id="goodsType" class=txlrow><c:out
        value="${goods.goodsType}"></c:out></td>
      <td align=center id="goodsName" class=txlrow><c:out
        value="${goods.goodsName}"></c:out></td>
      <td align=center id="goodsContent" class=txlrow><c:out
        value="${goods.goodsContent}"></c:out></td>
      <td align=center id="goodsPrice" class=txlrow><c:out
        value="${goods.goodsPrice}"></c:out></td>
      <td align=center id="goodsSell" class=txlrow><c:out
        value="${goods.goodsSell}"></c:out></td>
      <td align=center class=txlrow> <input type="button" value="编辑"></td>
     </tr>
    </c:forEach>

   </tbody>
  </table>

<!--分页显示-->
<div id="Pagination"></div>

js

var limit=<%=request.getAttribute("limit")%>;//每页显示多少 条数据
 var count=<%=request.getAttribute("count")%>//共多少条数据
 var index=<%=request.getAttribute("index")%>;//当前记录数
$(function(){
 $("#Pagination").pagination(count, {
  items_per_page:limit, // 每页显示多少条记录
  current_page: Math.ceil(index/limit), //当前页
  num_display_entries:4, // 分页显示的条目数
  next_text:"下一页",
  prev_text:"上一页",
  num_edge_entries:2, // 连接分页主体,显示的条目数
  callback:handlePaginationClick
 });
});


function handlePaginationClick(new_page_index, pagination_container) {
  var path="<%=ppath%>/goodsManager/searchGoodsBylimit/" + new_page_index*limit;
  $("#goodsForm").attr("action",path );
  $("#goodsForm").submit();
  return false;

}

控制器

@RequestMapping(value = "/searchGoodsBylimit/{index}")
 public String searchGoodsBylimitPst(Model model,
   @ModelAttribute Goods goods, @PathVariable String index,
   HttpServletRequest request) {
  //索引
  if (index == null || index.equals("")) {
   index = "0";
  //从服务器获取数据
  List<Goods> goodsS = goodsService.selectGoods(goods,
    Integer.parseInt(index), PageParam.limit);


  if (goodsS != null) {
   model.addAttribute("goodsS", goodsS);
  } else {
   model.addAttribute("resultMsg", "没有该商品");
  }
  //数据总条数
  int count = goodsService.selectAllCount(goods);
  model.addAttribute("index", index);
  model.addAttribute("count", count);
  model.addAttribute("limit", PageParam.limit);

  System.out.println("第" + index + "数据开始显示" + goodsS.size() + "条记录");
  return "goodsManager/showGoods";
 }

效果图

jquery.pagination.js分页使用教程

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery实现字体颜色渐变效果的方法
Mar 29 jQuery
jQuery实现分页功能(含ajax请求、后台数据、附完整demo)
Apr 03 jQuery
Jquery把获取到的input值转换成json
May 15 jQuery
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
Jul 12 jQuery
jQuery扇形定时器插件pietimer使用方法详解
Jul 18 jQuery
jQuery事件对象的属性和方法详解
Sep 09 jQuery
jQuery实现所有验证通过方可提交的表单验证
Nov 21 jQuery
javascript异步处理与Jquery deferred对象用法总结
Jun 04 jQuery
jquery获取input输入框中的值
Nov 13 jQuery
JQuery表单元素取值赋值方法总结
May 12 jQuery
jquery轮播图插件使用方法详解
Jul 31 jQuery
JQuery Ajax如何实现注册检测用户名
Sep 25 jQuery
jquery分页插件pagination使用教程
Oct 23 #jQuery
使用jquery Ajax实现上传附件功能
Oct 23 #jQuery
jquery实现动态添加附件功能
Oct 23 #jQuery
jQuery.validate.js表单验证插件的使用代码详解
Oct 22 #jQuery
jQuery轻量级表单模型验证插件
Oct 15 #jQuery
jquery实现联想词搜索框和搜索结果分页的示例
Oct 10 #jQuery
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
Oct 10 #jQuery
You might like
php读取csv文件后,uft8 bom导致在页面上显示出现问题的解决方法
2013/08/10 PHP
ThinkPHP3.2.3实现分页的方法详解
2016/06/03 PHP
PHP Header用于页面跳转时的几个注意事项
2016/10/21 PHP
php精度计算的问题解析
2019/06/21 PHP
用JTrackBar实现的模拟苹果风格的滚动条
2007/08/06 Javascript
Javascript Math对象
2009/08/13 Javascript
跨浏览器开发经验总结(四) 怎么写入剪贴板
2010/05/13 Javascript
JQUBar 基于JQUERY的柱状图插件
2010/11/23 Javascript
没有document.getElementByName方法
2013/08/19 Javascript
jquery获取当前元素索引值用法实例
2015/06/10 Javascript
深入浅析javascript立即执行函数
2015/10/23 Javascript
MVC+jQuery.Ajax异步实现增删改查和分页
2020/12/22 Javascript
使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享
2016/05/09 Javascript
js获取Html元素的实际宽度高度的方法
2016/05/19 Javascript
关于验证码在IE中不刷新的快速解决方法
2016/09/23 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(一)
2017/05/11 Javascript
CentOS 安装NodeJS V8.0.0的方法
2017/06/15 NodeJs
微信小程序可滑动周日历组件使用详解
2019/10/21 Javascript
JavaScript实现简单的计算器
2020/01/16 Javascript
python使用any判断一个对象是否为空的方法
2014/11/19 Python
python中urllib模块用法实例详解
2014/11/19 Python
浅谈python中的getattr函数 hasattr函数
2016/06/14 Python
Python日期时间模块datetime详解与Python 日期时间的比较,计算实例代码
2018/09/14 Python
Python基本数据结构与用法详解【列表、元组、集合、字典】
2019/03/23 Python
python datetime中strptime用法详解
2019/08/29 Python
使用python实现kNN分类算法
2019/10/16 Python
Python面向对象程序设计之类和对象、实例变量、类变量用法分析
2020/03/23 Python
什么是Python包的循环导入
2020/09/08 Python
tensorflow2.0教程之Keras快速入门
2021/02/20 Python
澳大利亚牛仔裤商店:Just Jeans
2016/10/13 全球购物
Needle & Thread官网:英国仙女品牌
2018/01/13 全球购物
《三峡》教学反思
2014/03/01 职场文书
大学军训感言400字
2014/03/11 职场文书
法律专业大学生职业生涯规划书:向目标一步步迈进
2014/09/22 职场文书
刘胡兰观后感
2015/06/16 职场文书
Python 匹配文本并在其上一行追加文本
2022/05/11 Python