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使用正则验证15/18身份证的方法示例
Apr 27 jQuery
jquery请求servlet实现ajax异步请求的示例
Jun 03 jQuery
jQuery 实现图片的依次加载图片功能
Jul 06 jQuery
jQuery实现的弹幕效果完整实例
Sep 06 jQuery
jquery如何实现点击空白处隐藏元素
Dec 05 jQuery
js与jQuery实现获取table中的数据并拼成json字符串操作示例
Jul 12 jQuery
详解jQuery中的easyui
Sep 02 jQuery
Jquery的autocomplete插件用法及参数讲解
Mar 12 jQuery
JQuery的加载和选择器用法简单示例
May 13 jQuery
jQuery实现的解析本地 XML 文档操作示例
Apr 30 jQuery
js和jquery判断数据类型的4种方法总结
Aug 28 jQuery
jquery实现点击左右按钮切换图片
Jan 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入门学习知识点五 关于php数组的几个基本操作
2011/07/14 PHP
深入php var_dump()函数的详解
2013/06/05 PHP
PHP中unset,array_splice删除数组中元素的区别
2014/07/28 PHP
thinkphp四种url访问方式详解
2014/11/28 PHP
PHP中使用imagick实现把PDF转成图片
2015/01/26 PHP
浅谈PHP中的
2016/04/23 PHP
php获取字符串前几位的实例(substr返回字符串的子串用法)
2017/03/08 PHP
JavaScript调用Activex控件的事件的实现方法
2010/04/11 Javascript
制作高质量的JQuery Plugin 插件的方法
2010/04/20 Javascript
js如何实现点击标签文字,文字在文本框出现
2015/08/05 Javascript
js内置对象处理_打印学生成绩单的简单实现
2016/09/24 Javascript
SelectPage v2.4 发布新增纯下拉列表和关闭分页功能
2017/09/07 Javascript
一篇文章,教你学会Vue CLI 插件开发
2019/04/17 Javascript
vue App.vue中的公共组件改变值触发其他组件或.vue页面监听
2019/05/31 Javascript
解决layer 动态加载select 失效的问题
2019/09/18 Javascript
原生JS实现顶部导航栏显示按钮+搜索框功能
2019/12/25 Javascript
Python3结合Dlib实现人脸识别和剪切
2018/01/24 Python
pyqt 实现在Widgets中显示图片和文字的方法
2019/06/13 Python
kali中python版本的切换方法
2019/07/11 Python
Pandas透视表(pivot_table)详解
2019/07/22 Python
python实现ip地址的包含关系判断
2020/02/07 Python
详解pandas中iloc, loc和ix的区别和联系
2020/03/09 Python
新建文件时Pycharm中自动设置头部模板信息的方法
2020/04/17 Python
详解使用scrapy进行模拟登陆三种方式
2021/02/21 Python
基于CSS3的CSS 多栏(Multi-column)实现瀑布流源码分享
2014/06/11 HTML / CSS
html5手机键盘弹出收起的处理
2020/01/20 HTML / CSS
皮尔·卡丹巴西官方商店:Pierre Cardin
2017/07/21 全球购物
2013年学期结束动员演讲稿
2014/01/07 职场文书
应聘护理专业毕业自荐书范文
2014/02/12 职场文书
小学校长先进事迹材料
2014/05/13 职场文书
商务经理岗位职责
2014/07/30 职场文书
交通事故和解协议书
2014/09/25 职场文书
机动车登记业务委托书
2014/10/08 职场文书
个人承诺书格式范文
2015/04/29 职场文书
《草船借箭》教学反思
2016/02/23 职场文书
Win11快速关闭所有广告推荐
2022/04/19 数码科技