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 17 jQuery
JQuery 获取Dom元素的实例讲解
Jul 08 jQuery
关于jQuery里prev()的简单操作代码
Oct 27 jQuery
jQuery实现动态控制页面元素的方法分析
Dec 20 jQuery
jQuery实现的手动拖动控制进度条效果示例【测试可用】
Apr 18 jQuery
jQuery 导航自动跟随滚动的实现代码
May 30 jQuery
jQuery实现动画、消失、显现、渐出、渐入效果示例
Sep 06 jQuery
在Vue项目中引入JQuery-ui插件的讲解
Jan 27 jQuery
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
May 13 jQuery
jQuery-Citys省市区三级菜单联动插件使用详解
Jul 26 jQuery
Jquery滑动门/tab切换实现方法完整示例
Jun 05 jQuery
jQuery实现本地存储
Dec 22 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
我的论坛源代码(一)
2006/10/09 PHP
PHP面向对象程序设计模拟一般面向对象语言中的方法重载(overload)示例
2019/06/13 PHP
Docker 安装 PHP并与Nginx的部署实例讲解
2021/02/27 PHP
超棒的javascript页面顶部卷动广告效果
2007/12/01 Javascript
锋利的jQuery 第三章章节总结的例子
2010/03/23 Javascript
Ajax异步提交表单数据的说明及方法实例
2013/06/22 Javascript
常用的JavaScript验证正则表达式汇总
2013/11/26 Javascript
js获取客户端网卡的IP地址、MAC地址
2014/03/26 Javascript
jquery实现动态改变div宽度和高度
2015/05/08 Javascript
jQuery+css3实现文字跟随鼠标的上下抖动
2015/07/31 Javascript
15个常用的jquery代码片段
2015/12/19 Javascript
javascript 利用arguments实现可变长参数
2016/11/21 Javascript
react同构实践之实现自己的同构模板
2019/03/13 Javascript
vue-cli3添加模式配置多环境变量的方法
2019/06/05 Javascript
Bootstrap实现前端登录页面带验证码功能完整示例
2020/03/26 Javascript
如何基于jQuery实现五角星评分
2020/09/02 jQuery
Vue实现简易购物车页面
2020/12/30 Vue.js
element-ui封装一个Table模板组件的示例
2021/01/04 Javascript
python 控制语句
2011/11/03 Python
python中使用mysql数据库详细介绍
2015/03/27 Python
使用Python构建Hopfield网络的教程
2015/04/14 Python
python实现requests发送/上传多个文件的示例
2018/06/04 Python
selenium+python自动化测试之环境搭建
2019/01/23 Python
Python3.8对可迭代解包的改进及用法详解
2019/10/15 Python
解决Python使用列表副本的问题
2019/12/19 Python
Python中sorted()排序与字母大小写的问题
2020/01/14 Python
Python基于requests库爬取网站信息
2020/03/02 Python
python中加背景音乐如何操作
2020/07/19 Python
使用django自带的user做外键的方法
2020/11/30 Python
微信小程序实现可实时改变转速的css3旋转动画实例代码
2018/09/11 HTML / CSS
编写类String的构造函数、析构函数和赋值函数
2012/05/29 面试题
什么是动态端口(Dynamic Ports)?动态端口的范围是多少?
2014/12/12 面试题
土木建筑学生自我评价
2014/01/14 职场文书
五年级英语教学反思
2014/01/31 职场文书
老兵退伍标语
2014/10/07 职场文书
Python中使用Lambda函数的5种用法
2021/04/01 Python