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中关于bind()方法的使用技巧分享
Mar 30 jQuery
js和jquery中获取非行间样式
May 05 jQuery
jQuery Validate 校验多个相同name的方法
May 18 jQuery
jQuery实现web页面樱花坠落的特效
Jun 01 jQuery
jQuery选择器之表单元素选择器详解
Sep 19 jQuery
jQuery实现页码跳转式动态数据分页
Dec 31 jQuery
jQuery实现模糊查询的方法分析
May 10 jQuery
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
Jun 10 jQuery
JQuery 实现文件下载的常用方法分析
Oct 29 jQuery
JQuery+drag.js上传图片并且实现图片拖曳
Nov 18 jQuery
jQuery实现可以扩展的日历
Dec 01 jQuery
jquery实现广告上下滚动效果
Mar 04 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 开发环境配置(Zend Server安装)
2010/04/28 PHP
推荐5款跨平台的PHP编辑器
2014/12/25 PHP
Thinkphp关闭缓存的方法
2015/06/26 PHP
php微信公众号开发(2)百度BAE搭建和数据库使用
2016/12/15 PHP
Laravel 5.4重新登录实现跳转到登录前页面的原理和方法
2017/07/13 PHP
PHP mysqli事务操作常用方法分析
2017/07/22 PHP
PHP getNamespaces()函数讲解
2019/02/03 PHP
使用PHP+Redis实现延迟任务,实现自动取消订单功能
2019/11/21 PHP
js left,right,mid函数
2008/06/10 Javascript
单击按钮显示隐藏子菜单经典案例
2013/01/04 Javascript
使图片旋转的3种解决方案
2013/11/21 Javascript
SpringMVC返回json数据的三种方式
2015/12/10 Javascript
Node.js插件安装图文教程
2016/05/06 Javascript
深入理解JavaScript单体内置对象
2016/06/06 Javascript
JavaScript实现阿拉伯数字和中文数字互相转换
2016/06/12 Javascript
ComboBox(下拉列表框)通过url加载调用远程数据的方法
2017/08/06 Javascript
jquery.uploadView 实现图片预览上传功能
2017/08/10 jQuery
vue实现文件上传读取及下载功能
2020/11/17 Javascript
Vue+Bootstrap实现简易学生管理系统
2021/02/09 Vue.js
python3如何将docx转换成pdf文件
2018/03/23 Python
Python 机器学习库 NumPy入门教程
2018/04/19 Python
Tensorflow 实现修改张量特定元素的值方法
2018/07/30 Python
Python实现微信自动好友验证,自动回复,发送群聊链接方法
2019/02/21 Python
numpy中的ndarray方法和属性详解
2019/05/27 Python
python实现图片压缩代码实例
2019/08/12 Python
pymysql的简单封装代码实例
2020/01/08 Python
html5构建触屏网站之touch事件介绍
2013/01/07 HTML / CSS
日本必酷网络直营店:Biccamera
2019/03/23 全球购物
Ruby如何进行文件操作
2014/07/17 面试题
营业经理岗位职责
2013/11/10 职场文书
经典的毕业生自荐信范文
2014/04/14 职场文书
反四风个人对照检查材料思想汇报
2014/09/25 职场文书
小学生表扬稿范文
2015/05/05 职场文书
电力工程合作意向书
2015/05/11 职场文书
python 网络编程要点总结
2021/06/18 Python
Vue如何清空对象
2022/03/03 Vue.js