JavaScript实现翻页功能(附效果图)


Posted in Javascript onFebruary 16, 2017

效果图:

JavaScript实现翻页功能(附效果图)

要点:

displayPage('#pageDiv','goPage','query',10,1,100);
  • #pageDiv是显示翻页的div名称。
  • goPage是跳转到后面的文本输入框的id,如果有需要可以根据 * 这个参数直接赋值。
  • query是查询的方法名称。
  • 10是总页数
  • 1是当前页数
  • 100是总条数。
<%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
<%String path = request.getContextPath();%>
<%String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%>
<script src="/easyui/jquery-easyui-1.4.3/jquery.min.js"></script>
<script src="page.js"></script>
<script>
function query(queryPage){
  //ajax查询表格需要的数据
  var queryPage = queryPage||1;
  console.log("query page=" + queryPage);
  //重新生成pageDiv
  displayPage('#pageDiv','goPage','query',10,1,100);
}
</script>
<body>
<button onclick="query()">查询</button>
<div>
用js实现的一个翻页。<br/>
使用场景:table中的数据通过ajax查询,查询完毕之后调用js生成翻页控件。<br/>
<pre>
displayPage('#pageDiv','goPage','query',10,1,100);
</pre>
</div>
<br/>
<div id="pageDiv"></div>
</body>

page.js

/**
 * divObj:显示翻页的div,默认body。如:#pageDiv
 * inputId:跳转页面的id,默认goPage。如:goPage
 * js:点击过之后执行js的方法名。默认query。如:query
 * records:总页数,默认1。
 * total:总记录数,默认0。
 * page:当前页,默认1。
 */
function displayPage(divObj,inputId,js,records,page,total){
  //设置默认值   
  divObj = divObj||"body";
  inputId = inputId||"goPage";
  js=js||"query";
  records=records||1;
  total=total||0;
  page=page||1;
  var str = "当前第 <span name='page'>"+page+"</span> 页";
  str += " 共 <span name='total'>"+records+"</span> 页";
  str += " <a href='javascript:void(0)' onclick='"+js+"(1)'>首页</a>";
  if(page>1){
    str += " <a href='javascript:void(0)' onclick='"+js+"("+(page-1)+")'>上一页</a>";
  }else{
    str += " <a>上一页</a>";
  }
  if(page<records){
    str += " <a href='javascript:void(0)' onclick='"+js+"("+(page+1)+")'>下一页</a>";
  }else{
    str += " <a>下一页</a>";
  }
  str += " <a href='javascript:void(0)' onclick='"+js+"("+records+")'>尾页</a>";
  str += " 跳转到 <input type='number' min=1 max="+records+" id='"+inputId+"' value="+page+" style='width:40px'/>";
  str += " <input type='button' value='go' onclick='var num=$(\"#"+inputId+"\").val();"+js+"(num)'/>";
  $(divObj).empty();
  $(divObj).append(str);
}

以上所述是小编给大家介绍的JavaScript实现翻页功能(附效果图),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
IE JS编程需注意的内存释放问题
Jun 23 Javascript
JQuery触发事件例如click
Sep 11 Javascript
多引号嵌套的变量命名的问题
May 09 Javascript
解决自定义$(id)的方法与jquery选择器$冲突的问题
Jun 14 Javascript
jQuery实现的网页竖向菜单效果代码
Aug 26 Javascript
Jquery跨浏览器文本复制插件Zero Clipboard的使用方法
Feb 28 Javascript
关于RequireJS的简单介绍即使用方法
Oct 20 Javascript
详解使用Next.js构建服务端渲染应用
Jul 10 Javascript
微信小程序将字符串生成二维码图片的操作方法
Jul 17 Javascript
vue中slot(插槽)的介绍与使用
Nov 12 Javascript
微信小程序实现页面浮动导航
Jan 28 Javascript
vue router总结 $router和$route及router与 router与route区别
Jul 05 Javascript
浅谈$_FILES数组为空的原因
Feb 16 #Javascript
原生js实现秒表计时器功能
Feb 16 #Javascript
js 将input框中的输入自动转化成半角大写(税号输入框)
Feb 16 #Javascript
基于JS实现翻书效果的页面切换样式
Feb 16 #Javascript
js实现3d悬浮效果
Feb 16 #Javascript
JavaScript中利用构造器函数模拟类的方法
Feb 16 #Javascript
js实现截图保存图片功能的代码示例
Feb 16 #Javascript
You might like
用PHP实现小型站点广告管理
2006/10/09 PHP
php实现监听事件
2013/11/06 PHP
php实现的漂亮分页方法
2014/04/17 PHP
php实例分享之通过递归实现删除目录下的所有文件详解
2014/05/15 PHP
Jquery 学习笔记(一)
2009/10/13 Javascript
JavaScript 打地鼠游戏代码说明
2010/10/12 Javascript
js 第二代身份证号码的验证机制代码
2011/05/12 Javascript
解决js中window.open弹出的是上次的缓存页面问题
2013/12/29 Javascript
jsPDF导出pdf示例
2014/05/02 Javascript
jQuery中toggle()函数的使用实例
2015/04/17 Javascript
js实现的tab标签切换效果代码分享
2015/08/25 Javascript
jqGrid表格应用之新增与删除数据附源码下载
2015/12/02 Javascript
Angular表单验证实例详解
2016/10/20 Javascript
Vue2递归组件实现树形菜单
2017/04/10 Javascript
vue js秒转天数小时分钟秒的实例代码
2018/08/08 Javascript
用js限制网页只在微信浏览器中打开(或者只能手机端访问)
2020/12/24 Javascript
基于javascript实现碰撞检测
2020/03/12 Javascript
python通过pil将图片转换成黑白效果的方法
2015/03/16 Python
Python基于递归算法实现的汉诺塔与Fibonacci数列示例
2018/04/18 Python
python远程连接服务器MySQL数据库
2018/07/02 Python
在python中利用numpy求解多项式以及多项式拟合的方法
2019/07/03 Python
python3.x提取中文的正则表达式示例代码
2019/07/23 Python
python微信公众号开发简单流程实现
2020/03/09 Python
opencv python 图片读取与显示图片窗口未响应问题的解决
2020/04/24 Python
Python日志器使用方法及原理解析
2020/09/27 Python
canvas学习总结三之绘制路径-线段
2019/01/31 HTML / CSS
泰国健康和美容服务预订网站:GoWabi
2019/06/03 全球购物
会计电算化应届生求职信
2013/11/03 职场文书
应聘收银员个人的求职信
2013/11/30 职场文书
上学迟到的检讨书
2014/01/11 职场文书
运动会广播稿150字
2014/02/19 职场文书
函授毕业个人自我评价
2014/02/20 职场文书
小学领导班子对照材料
2014/08/23 职场文书
早上好问候语大全
2015/11/10 职场文书
python OpenCV学习笔记
2021/03/31 Python
Python中的程序流程控制语句
2022/02/24 Python