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实现radio第一次点击选中第二次点击取消功能
May 15 jQuery
jquery.validate表单验证插件使用详解
Jun 21 jQuery
简单实现jQuery轮播效果
Aug 18 jQuery
jquery ajaxfileupload异步上传插件
Nov 21 jQuery
jQuery滚动条美化插件nicescroll简单用法示例
Apr 18 jQuery
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
Jun 14 jQuery
jQuery实现表格的增、删、改操作示例
Jan 27 jQuery
jquery实现的分页显示功能示例
Aug 23 jQuery
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
Sep 03 jQuery
jquery 时间戳转日期过程详解
Oct 12 jQuery
高效jQuery选择器的5个技巧实例分析
Nov 26 jQuery
JQuery中的常用事件、对象属性与使用方法分析
Dec 23 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+flash+jQuery多图片上传源码分享
2020/07/27 PHP
解决php用mysql方式连接数据库出现Deprecated报错问题
2019/12/25 PHP
javascript 函数式编程
2007/08/16 Javascript
jQuery 性能优化手册 推荐
2010/02/23 Javascript
javascript 事件处理程序介绍
2012/06/27 Javascript
jQuery getJSON()+.ashx 实现分页(改进版)
2013/03/28 Javascript
浮动的div自适应居中显示的js代码
2013/12/23 Javascript
javascript常用的方法整理
2015/08/20 Javascript
jQuery使用zTree插件实现树形菜单和异步加载
2016/02/25 Javascript
javascript三种代码注释方法
2016/06/02 Javascript
JavaScript中清空数组的方法总结
2016/12/02 Javascript
angularjs项目的页面跳转如何实现(5种方法)
2017/05/25 Javascript
js实现图片跟随鼠标移动效果
2019/10/16 Javascript
JS基础之逻辑结构与循环操作示例
2020/01/19 Javascript
Vue的Eslint配置文件eslintrc.js说明与规则介绍
2020/02/03 Javascript
jQuery 实现扁平式小清新导航
2020/07/07 jQuery
uniapp实现横向滚动选择日期
2020/10/21 Javascript
[46:02]DOTA2上海特级锦标赛D组资格赛#2 Liquid VS VP第二局
2016/02/28 DOTA
[01:52]2020年DOTA2 TI10夏季活动预告片
2020/07/15 DOTA
Python编程scoketServer实现多线程同步实例代码
2018/01/29 Python
利用python实现微信头像加红色数字功能
2018/03/26 Python
Python实现带参数的用户验证功能装饰器示例
2018/12/14 Python
Django CBV与FBV原理及实例详解
2019/08/12 Python
Python中的全局变量如何理解
2020/06/04 Python
详解CSS3 弹性布局快速入门
2019/06/06 HTML / CSS
基于HTML5的齿轮动画特效
2016/02/29 HTML / CSS
德国PC硬件网站:CASEKING
2016/10/20 全球购物
英国鞋类及配饰零售商:Kurt Geiger
2017/02/04 全球购物
Answear匈牙利:来自全球200多个知名时尚品牌
2017/04/21 全球购物
Hertz荷兰:荷兰和全球租车
2018/01/07 全球购物
美国网上书店:Barnes & Noble
2018/08/15 全球购物
自荐信包含哪些内容
2013/10/30 职场文书
建筑系毕业生自我鉴定
2014/01/24 职场文书
2015年企业团支部工作总结
2015/05/21 职场文书
MySQL表类型 存储引擎 的选择
2021/11/11 MySQL
python多次执行绘制条形图
2022/04/20 Python