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实现tab选项卡切换效果(悬停、下方横线动画位移)
May 05 jQuery
jQuery复合事件用法示例
Jun 10 jQuery
jquery.validate表单验证插件使用详解
Jun 21 jQuery
JQuery判断正整数整理小结
Aug 21 jQuery
jQuery结合jQuery.cookie.js插件实现换肤功能示例
Oct 14 jQuery
jQuery实现左右滑动的toggle方法
Mar 03 jQuery
如何用input标签和jquery实现多图片的上传和回显功能
May 16 jQuery
通过jquery.cookie.js实现记住用户名、密码登录功能
Jun 20 jQuery
jQuery超简单遮罩层实现方法示例
Sep 06 jQuery
jQuery事件blur()方法的使用实例讲解
Mar 30 jQuery
jquery插件开发模式实例详解
Jul 20 jQuery
jQuery实现简单QQ聊天框
Aug 27 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缓存函数的使用说明
2013/05/10 PHP
PHP商品秒杀问题解决方案实例详解【mysql与redis】
2019/07/22 PHP
新浪中用来显示flash的函数
2007/04/02 Javascript
jquery 双色表格实现代码
2009/12/08 Javascript
javascript 鼠标拖动图标技术
2010/02/07 Javascript
JS兼容浏览器的导出Excel(CSV)文件的方法
2014/05/03 Javascript
js实现带有介绍的Select列表菜单实例
2015/08/18 Javascript
jQuery EasyUI框架中的Datagrid数据表格组件结构详解
2016/06/09 Javascript
JS实现鼠标框选效果完整实例
2016/06/20 Javascript
jQuery查找节点方法完整实例
2016/09/13 Javascript
小程序tab页无法传递参数的方法
2018/08/03 Javascript
微信小程序获取用户绑定手机号方法示例
2019/07/21 Javascript
Vuex中实现数据状态查询与更改
2019/11/08 Javascript
基于小程序请求接口wx.request封装的类axios请求
2020/07/02 Javascript
SublimeText 2编译python出错的解决方法(The system cannot find the file specified)
2013/11/27 Python
零基础写python爬虫之使用Scrapy框架编写爬虫
2014/11/07 Python
用python记录运行pid,并在需要时kill掉它们的实例
2017/01/16 Python
Python入门_浅谈for循环、while循环
2017/05/16 Python
Python:Scrapy框架中Item Pipeline组件使用详解
2017/12/27 Python
Sublime开发python程序的示例代码
2018/01/24 Python
python字符串Intern机制详解
2019/07/01 Python
Python获取一个用户名的组ID过程解析
2019/09/03 Python
python实现ftp文件传输功能
2020/03/20 Python
Python中zipfile压缩文件模块的基本使用教程
2020/06/14 Python
Python数据模型与Python对象模型的相关总结
2021/01/26 Python
意大利在线大学图书馆:Libreria universitaria
2019/07/16 全球购物
Sahajan美国:阿育吠陀护肤品牌
2021/01/09 全球购物
行政总监岗位职责
2013/12/05 职场文书
入学申请自荐信范文
2014/02/26 职场文书
质量在我心中演讲稿
2014/09/02 职场文书
公司授权委托书范文
2014/09/21 职场文书
一般党员对照检查材料
2014/09/24 职场文书
专业见习报告范文
2014/11/03 职场文书
幼儿教师师德师风自我评价
2015/03/05 职场文书
2015年维修工作总结
2015/04/25 职场文书
MySQL常见优化方案汇总
2022/01/18 MySQL