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实现图片上传前本地预览
Apr 28 jQuery
jQuery手风琴的简单制作
May 12 jQuery
QRCode.js:基于JQuery的生成二维码JS库的使用
Jun 23 jQuery
如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
Jul 17 jQuery
jQuery Collapse1.1.0折叠插件简单使用
Aug 28 jQuery
javascript+jQuery实现360开机时间显示效果
Nov 03 jQuery
jQuery幻灯片插件owlcarousel参数说明中文文档
Feb 27 jQuery
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
May 14 jQuery
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
Jun 10 jQuery
jQuery 判断元素是否存在然后按需加载内容的实现代码
Jan 16 jQuery
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
May 19 jQuery
jQuery实现可以扩展的日历
Dec 01 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面向对象教程之自定义类
2014/06/10 PHP
thinkphp学习笔记之多表查询
2014/07/28 PHP
PHP获取ip对应地区和使用网络类型的方法
2015/03/11 PHP
javascript作用域和闭包使用详解
2014/04/25 Javascript
ES6中非常实用的新特性介绍
2016/03/10 Javascript
jQuery获取剪贴板内容的方法
2016/06/16 Javascript
jQuery基础_入门必看知识点
2016/07/04 Javascript
Canvas 绘制粒子动画背景
2017/02/15 Javascript
vue组件如何被其他项目引用
2017/04/13 Javascript
引入外部js脚本加载慢与页面白屏问题的解决
2018/12/10 Javascript
Python collections模块实例讲解
2014/04/07 Python
Python实现简单的获取图片爬虫功能示例
2017/07/12 Python
python timestamp和datetime之间转换详解
2017/12/11 Python
python的Crypto模块实现AES加密实例代码
2018/01/22 Python
Python解析命令行读取参数--argparse模块使用方法
2018/01/23 Python
对pandas数据判断是否为NaN值的方法详解
2018/11/06 Python
Python 中 function(#) (X)格式 和 (#)在Python3.*中的注意事项
2018/11/30 Python
python super用法及原理详解
2020/01/20 Python
jupyter notebook 多环境conda kernel配置方式
2020/04/10 Python
python中pathlib模块的基本用法与总结
2020/08/17 Python
python在地图上画比例的实例详解
2020/11/13 Python
python通过cython加密代码
2020/12/11 Python
什么是事务?为什么需要事务?
2012/01/09 面试题
师范生自我鉴定范文
2013/10/05 职场文书
汽车销售顾问求职自荐信
2014/01/01 职场文书
远程研修随笔感言
2014/02/10 职场文书
家电业务员岗位职责
2014/03/10 职场文书
媒体宣传策划方案
2014/05/25 职场文书
2014年工作总结与下年工作计划
2014/11/27 职场文书
助学感谢信范文
2015/01/21 职场文书
工作检讨书大全
2015/01/26 职场文书
中学生勤俭节约倡议书
2015/04/29 职场文书
2015年市场部工作总结
2015/04/30 职场文书
建国大业观后感
2015/06/01 职场文书
实用干货:敬酒词大全,帮你应付各种场合
2019/11/21 职场文书
spring 项目实现限流方法示例
2022/07/15 Java/Android