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实现Select下拉列表进行状态选择功能
Mar 30 jQuery
jQuery简介_动力节点Java学院整理
Jul 04 jQuery
使用jQuery实现页面定时弹出广告效果
Aug 24 jQuery
jquery插件开发之选项卡制作详解
Aug 30 jQuery
jquery实现倒计时小应用
Sep 19 jQuery
浅谈jquery fullpage 插件增加头部和版权的方法
Mar 20 jQuery
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
Mar 28 jQuery
jQuery实现form表单序列化转换为json对象功能示例
May 23 jQuery
jQuery实现的页面详情展开收起功能示例
Jun 11 jQuery
jQuery实现的隔行变色功能【案例】
Feb 18 jQuery
jQuery-Citys省市区三级菜单联动插件使用详解
Jul 26 jQuery
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
Oct 10 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
Dedecms常用函数解析
2008/02/01 PHP
PHP IN_ARRAY 函数使用注意事项
2010/07/24 PHP
php文件怎么打开 如何执行php文件
2011/12/21 PHP
tp5(thinkPHP5框架)时间查询操作实例分析
2019/05/29 PHP
js类的静态属性和实例属性的理解
2009/10/01 Javascript
使用jQuery fancybox插件打造一个实用的数据传输模态弹出窗体
2013/01/15 Javascript
jQuery 关于伪类选择符的使用说明
2013/04/24 Javascript
点击显示指定元素隐藏其他同辈元素的方法
2014/02/19 Javascript
js身份证判断方法支持15位和18位
2014/03/18 Javascript
JS基于面向对象实现的放烟花效果
2015/05/07 Javascript
Bootstrap每天必学之折叠(Collapse)插件
2016/04/25 Javascript
详解在AngularJS的controller外部直接获取$scope
2017/06/02 Javascript
总结js中的一些兼容性易错的问题
2017/12/18 Javascript
jquery根据name取得select选中的值实例(超简单)
2018/01/25 jQuery
小程序清理本地缓存的方法
2018/08/17 Javascript
记React connect的几种写法(小结)
2018/09/18 Javascript
解决eclipse中没有js代码提示的问题
2018/10/10 Javascript
JS 实现获取验证码 倒计时功能
2018/10/29 Javascript
详解react-refetch的使用小例子
2019/02/15 Javascript
python交互式图形编程实例(一)
2017/11/17 Python
浅谈机器学习需要的了解的十大算法
2017/12/15 Python
Python OpenCV对本地视频文件进行分帧保存的实例
2019/01/08 Python
详解利用python+opencv识别图片中的圆形(霍夫变换)
2019/07/01 Python
django之静态文件 django 2.0 在网页中显示图片的例子
2019/07/28 Python
python实现一个函数版的名片管理系统过程解析
2019/08/27 Python
canvas绘制图片drawImage使用方法
2020/09/15 HTML / CSS
美国知名的在线旅游服务网站:Priceline
2016/07/23 全球购物
极简鞋类,赤脚的感觉:Lems Shoes
2019/08/06 全球购物
Blue Nile中国官网:全球知名的钻石和珠宝网络零售商
2020/03/22 全球购物
汽车销售顾问求职自荐信
2014/01/01 职场文书
优秀班主任推荐材料
2014/12/17 职场文书
表扬通报怎么写
2015/01/16 职场文书
会议欢迎词范文
2015/01/27 职场文书
描述鲁迅的名言整理,一生受用
2019/08/08 职场文书
Python实战之实现简易的学生选课系统
2021/05/25 Python
动态规划之使用备忘录来改进Javascript函数
2022/04/07 Javascript