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 append与appendTo方法比较
May 24 jQuery
jQuery.Form实现Ajax上传文件同时设置headers的方法
Jun 26 jQuery
利用jQuery异步上传文件的插件用法详解
Jul 19 jQuery
jQuery 中msgTips 顶部弹窗效果实现代码
Aug 14 jQuery
jquery ztree实现右键收藏功能
Nov 20 jQuery
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
Jan 08 jQuery
jQuery实现的滑块滑动导航效果示例
Jun 04 jQuery
jQuery解析json格式数据示例
Sep 01 jQuery
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
May 04 jQuery
jquery操作checkbox的常用方法总结【附测试源码下载】
Jun 10 jQuery
jQuery实现文本显示一段时间后隐藏的方法分析
Jun 20 jQuery
jquery轮播图插件使用方法详解
Jul 31 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
关于我转生变成史莱姆这档事:第二季PV上线,萌王2021年回归
2020/05/06 日漫
php实现的获取网站备案信息查询代码(360)
2013/09/23 PHP
微信支付开发教程(一)微信支付URL配置
2014/05/28 PHP
PHP中抽象类和抽象方法概念与用法分析
2016/05/24 PHP
Ubuntu彻底删除PHP7.0的方法
2018/07/27 PHP
PHP容器类的两种实现方式示例
2019/07/24 PHP
javascript面向对象编程代码
2011/12/19 Javascript
Javascript自定义函数判断网站访问类型是PC还是移动终端
2014/01/10 Javascript
使用Browserify配合jQuery进行编程的超级指南
2015/07/28 Javascript
jQuery满屏焦点图左右滚动特效代码分享
2015/09/07 Javascript
js如何实现淡入淡出效果
2020/11/18 Javascript
jQuery中cookie插件用法实例分析
2015/12/04 Javascript
JS使用面向对象技术实现的tab选项卡效果示例
2017/02/28 Javascript
原生JS+CSS实现炫酷重力模拟弹跳系统的登录页面
2017/11/01 Javascript
基于D3.js实现时钟效果
2018/07/17 Javascript
Python读写Redis数据库操作示例
2014/03/18 Python
Python下的subprocess模块的入门指引
2015/04/16 Python
python 2.7.14安装图文教程
2018/04/08 Python
Pycharm之快速定位到某行快捷键的方法
2019/01/20 Python
python判断文件是否存在,不存在就创建一个的实例
2019/02/18 Python
twilio python自动拨打电话,播放自定义mp3音频的方法
2019/08/08 Python
python Jupyter运行时间实例过程解析
2019/12/13 Python
关于多元线性回归分析——Python&amp;SPSS
2020/02/24 Python
15个Pythonic的代码示例(值得收藏)
2020/10/29 Python
各大浏览器 CSS3 和 HTML5 兼容速查表 图文
2010/04/01 HTML / CSS
HTML5的Geolocation地理位置定位API使用教程
2016/05/12 HTML / CSS
html5调用摄像头功能的实现代码
2018/05/07 HTML / CSS
PPP协议组成及简述协议协商的基本过程
2015/05/28 面试题
国贸类专业毕业生的求职信分享
2013/12/08 职场文书
逃课检讨书
2015/01/26 职场文书
乡镇党建工作总结2015
2015/05/19 职场文书
结婚司仪主持词
2015/06/29 职场文书
阳光体育运动标语口号
2015/12/26 职场文书
《莫泊桑拜师》教学反思
2016/02/22 职场文书
基于docker安装zabbix的详细教程
2022/06/05 Servers
vue实现input输入模糊查询的三种方式
2022/08/14 Vue.js