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 相关文章推荐
vue中如何引入jQuery和Bootstrap
Apr 10 jQuery
js和jquery中获取非行间样式
May 05 jQuery
jquery+css实现简单的图片轮播效果
Aug 07 jQuery
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
Aug 23 jQuery
使用jquery+iframe做一个ajax上传效果(实例)
Aug 24 jQuery
jQuery实现IE输入框完成placeholder标签功能的方法
Sep 20 jQuery
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
Jan 21 jQuery
jquery实现的简单轮播图功能【适合新手】
Aug 17 jQuery
jQuery 点击获取验证码按钮及倒计时功能
Sep 20 jQuery
学习jQuery中的noConflict()用法
Sep 28 jQuery
基于jquery实现的tab选项卡功能示例【附源码下载】
Jun 10 jQuery
jQuery实现电梯导航模块
Dec 22 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/09/09 PHP
PHP入门教程之正则表达式基本用法实例详解(正则匹配,搜索,分割等)
2016/09/11 PHP
PHP实现简单用户登录界面
2019/10/23 PHP
按下Enter焦点移至下一个控件的实现js代码
2013/12/11 Javascript
js 转义字符及URI编码详解
2017/02/28 Javascript
ES6新增数据结构WeakSet的用法详解
2017/08/07 Javascript
web前端开发中常见的多列布局解决方案整理(一定要看)
2017/10/15 Javascript
Vue2.0父子组件传递函数的教程详解
2017/10/16 Javascript
ES6 javascript的异步操作实例详解
2017/10/30 Javascript
Node.js Buffer用法解读
2018/05/18 Javascript
Angular刷新当前页面的实现方法
2018/11/21 Javascript
微信小程序缓存过期时间的使用详情
2019/05/12 Javascript
JS实现打砖块游戏
2020/02/14 Javascript
node创建Vue项目步骤详解
2020/03/06 Javascript
Python 文件操作实现代码
2009/10/07 Python
python实现监控windows服务并自动启动服务示例
2014/04/17 Python
Python3读取UTF-8文件及统计文件行数的方法
2015/05/22 Python
在类Unix系统上开始Python3编程入门
2015/08/20 Python
Python OpenCV处理图像之图像像素点操作
2018/07/10 Python
python查看模块,对象的函数方法
2018/10/16 Python
用Python抢火车票的简单小程序实现解析
2019/08/14 Python
python 采用paramiko 远程执行命令及报错解决
2019/10/21 Python
python读取Kafka实例
2019/12/23 Python
python如何基于redis实现ip代理池
2020/01/17 Python
解决tensorflow/keras时出现数组维度不匹配问题
2020/06/29 Python
软件缺陷的分类都有哪些
2014/08/22 面试题
合同协议书格式
2014/04/18 职场文书
教师党员学习十八届四中全会思想汇报
2014/11/03 职场文书
2016自主招生校长推荐信范文
2015/03/23 职场文书
就业指导讲座心得体会
2016/01/15 职场文书
礼仪培训心得体会
2016/01/22 职场文书
MySQL之DML语言
2021/04/05 MySQL
Python 实现定积分与二重定积分的操作
2021/05/26 Python
MongoDB数据库常用的10条操作命令
2021/06/18 MongoDB
深入讲解Vue中父子组件通信与事件触发
2022/03/22 Vue.js
Win10服务主机占用内存怎么办?Win10服务主机进程占用大量内存解决方法
2022/09/23 数码科技