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插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
Mar 24 jQuery
jquery实现简单实用的轮播器
May 23 jQuery
使用jQuery.Pin垂直滚动时固定导航
May 24 jQuery
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
Aug 23 jQuery
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
Sep 12 jQuery
jQuery除指定区域外点击任何地方隐藏DIV功能
Nov 13 jQuery
jQuery EasyUI 折叠面板accordion的使用实例(分享)
Dec 25 jQuery
jQuery实现基本隐藏与显示效果的方法详解
Sep 05 jQuery
AJAX在JQuery中的应用详解
Jan 30 jQuery
javascript异步处理与Jquery deferred对象用法总结
Jun 04 jQuery
jQuery删除/清空指定元素的所有子节点实例代码
Jul 04 jQuery
如何使用jQuery操作Cookies方法解析
Sep 08 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
1.PHP简介
2006/10/09 PHP
php快递单号查询接口使用示例
2014/05/05 PHP
ThinkPHP 表单自动验证运用示例
2014/10/13 PHP
关于全局变量和局部变量的那些事
2013/01/11 Javascript
鼠标经过显示二级菜单js特效
2013/08/13 Javascript
javascript阻止scroll事件多次执行的思路及实现
2013/11/08 Javascript
Tab切换组件(选项卡功能)实例代码
2013/11/21 Javascript
jQuery 删除或是清空某个HTML元素示例
2014/08/04 Javascript
JS获取字符串实际长度(包含汉字)的简单方法
2016/08/11 Javascript
jQuery实现花式轮播之圣诞节礼物传送效果
2016/12/25 Javascript
js 判断数据类型的几种方法
2017/01/13 Javascript
js推箱子小游戏步骤代码解析
2018/01/10 Javascript
Vue+webpack+Element 兼容问题总结(小结)
2018/08/16 Javascript
Vue的click事件防抖和节流处理详解
2019/11/13 Javascript
Python文件处理
2016/02/29 Python
python脚本爬取字体文件的实现方法
2017/04/29 Python
Python随机生成均匀分布在三角形内或者任意多边形内的点
2017/12/14 Python
PyQt5+requests实现车票查询工具
2019/01/21 Python
Python图像处理之图片文字识别功能(OCR)
2019/07/30 Python
python实现图像检索的三种(直方图/OpenCV/哈希法)
2019/08/08 Python
python使用pip安装模块出现ReadTimeoutError: HTTPSConnectionPool的解决方法
2019/10/04 Python
pymysql的简单封装代码实例
2020/01/08 Python
Pytest mark使用实例及原理解析
2020/02/22 Python
python实现交并比IOU教程
2020/04/16 Python
利用python清除移动硬盘中的临时文件
2020/10/28 Python
Python通过字典映射函数实现switch
2020/11/06 Python
美国最受欢迎的度假目的地优惠套餐:BookVIP
2018/09/27 全球购物
几道PHP的面试题
2012/05/19 面试题
教师自我鉴定
2013/12/13 职场文书
大专生自我鉴定怎么写
2014/09/16 职场文书
培训感想范文
2015/08/07 职场文书
运动会200米广播稿
2015/08/19 职场文书
运动会班级口号霸气押韵
2015/12/24 职场文书
2016年教师党员创先争优承诺书
2016/03/24 职场文书
python 下载文件的几种方式分享
2021/04/07 Python
分享五个Node.js开发的优秀实践 
2022/04/07 NodeJs