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返回定位插件详解
May 15 jQuery
jQuery实现选中行变色效果(实例讲解)
Jul 06 jQuery
jQuery 中msgTips 顶部弹窗效果实现代码
Aug 14 jQuery
jQuery Position方法使用和兼容性
Aug 23 jQuery
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
Oct 19 jQuery
[原创]jquery判断元素内容是否为空的方法
May 04 jQuery
jquery的$().each和$.each的区别
Jan 18 jQuery
JQuery 实现文件下载的常用方法分析
Oct 29 jQuery
jquery实现简单自动轮播图效果
Jul 29 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
德劲1104的电路分析与改良
2021/03/01 无线电
php 无法加载mcrypt.dll的解决办法
2013/04/03 PHP
destoon在360浏览器下出现用户被强行注销的解决方法
2014/06/26 PHP
PHP 正则表达式小结
2015/02/12 PHP
php设计模式之单例模式实例分析
2015/02/25 PHP
PHP实现恶意DDOS攻击避免带宽占用问题方法
2015/05/27 PHP
php实现阳历阴历互转的方法
2015/10/28 PHP
PHP convert_cyr_string()函数讲解
2019/02/13 PHP
js打印纸函数代码(递归)
2010/06/18 Javascript
jQuery实现高亮显示的方法
2015/03/10 Javascript
Javascript定义类(class)的三种方法详解
2015/03/13 Javascript
AngularJS路由切换实现方法分析
2017/03/17 Javascript
手机端转换rem适应
2017/04/01 Javascript
Node+Express+MongoDB实现登录注册功能实例
2017/04/23 Javascript
详解如何构建一个Angular6的第三方npm包
2018/09/07 Javascript
微信小程序实现上传word、txt、Excel、PPT等文件功能
2019/05/23 Javascript
layui多iframe页面控制定时器运行的方法
2019/09/05 Javascript
Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)
2019/11/21 Javascript
jQuery使用ajax传递json对象到服务端及contentType的用法示例
2020/03/12 jQuery
python批量修改文件名的实现代码
2014/09/01 Python
跟老齐学Python之变量和参数
2014/10/10 Python
浅谈Python的文件类型
2016/05/30 Python
深入浅析Python中join 和 split详解(推荐)
2016/06/30 Python
Python 实现选择排序的算法步骤
2018/04/22 Python
python实践项目之监控当前联网状态详情
2019/05/23 Python
如何开发一个JQuery插件
2016/07/28 面试题
四年级下册教学反思
2014/02/01 职场文书
挂科检讨书范文
2014/02/20 职场文书
《美丽的小兴安岭》教学反思
2014/02/26 职场文书
国际经济贸易专业自荐信
2014/06/13 职场文书
社区精神文明建设汇报材料
2014/08/17 职场文书
大一工商管理职业生涯规划:有梦最美,行动相随
2014/09/18 职场文书
教师三严三实心得体会
2014/10/11 职场文书
辛亥革命观后感
2015/06/02 职场文书
2019年教师入党申请书
2019/06/27 职场文书
nginx配置限速限流基于内置模块
2022/05/02 Servers