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 相关文章推荐
学习YUI.Ext 第二天
Mar 10 Javascript
Javascript 调试利器 Firebug使用详解六
Jul 05 Javascript
让你的网站可编辑的实现js代码
Oct 19 Javascript
JavaScript 实现鼠标拖动元素实例代码
Feb 24 Javascript
jquery浏览器滚动加载技术实现方案
Jun 03 Javascript
node.js使用require()函数加载模块
Nov 26 Javascript
使用jQuery实现WordPress中的Ctrl+Enter和@评论回复
May 21 Javascript
Javascript基础_标记文字的实现方法
Jun 14 Javascript
JS/HTML5游戏常用算法之碰撞检测 地图格子算法实例详解
Dec 12 Javascript
微信小程序与公众号实现数据互通的方法
Jul 25 Javascript
JavaScript中的this原理及6种常见使用场景详解
Feb 14 Javascript
基于Element封装一个表格组件tableList的使用方法
Jun 29 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
基于文本的搜索
2006/10/09 PHP
建立文件交换功能的脚本(三)
2006/10/09 PHP
PHP数组及条件,循环语句学习
2012/11/11 PHP
php实现smarty模板无限极分类的方法
2015/12/07 PHP
jquery计算鼠标和指定元素之间距离的方法
2015/06/26 Javascript
详解JavaScript的变量和数据类型
2015/11/27 Javascript
JavaScript计时器用法分析【setTimeout和clearTimeout】
2017/01/18 Javascript
js获取指定时间的前几秒
2017/04/05 Javascript
微信小程序 动态绑定事件并实现事件修改样式
2017/04/13 Javascript
jQuery Masonry瀑布流布局神器使用详解
2017/05/25 jQuery
AngularJS $http post 传递参数数据的方法
2018/10/09 Javascript
vue.js层叠轮播效果的实例代码
2018/11/08 Javascript
node.js实现微信开发之获取用户授权
2019/03/18 Javascript
node.js ws模块搭建websocket服务端的方法示例
2019/04/25 Javascript
彻底揭秘keep-alive原理(小结)
2019/05/05 Javascript
js+springMVC 提交数组数据到后台的实例
2019/09/21 Javascript
JavaScript实现随机点名小程序
2020/10/29 Javascript
ES6字符串的扩展实例
2020/12/21 Javascript
python创建只读属性对象的方法(ReadOnlyObject)
2013/02/10 Python
批处理与python代码混合编程的方法
2016/05/19 Python
Python判断一个三位数是否为水仙花数的示例
2018/11/13 Python
详解Python数据分析--Pandas知识点
2019/03/23 Python
python覆盖写入,追加写入的实例
2019/06/26 Python
在PyCharm中控制台输出日志分层级分颜色显示的方法
2019/07/11 Python
HTML5之SVG 2D入门7—SVG元素的重用与引用
2013/01/30 HTML / CSS
JavaScript获取当前url根目录(路径)
2014/02/19 面试题
光电信息专业应届生求职信
2013/10/07 职场文书
车工岗位职责
2013/11/26 职场文书
黄继光的英雄事迹材料
2014/02/13 职场文书
施工单位安全责任书
2014/07/24 职场文书
婚礼新人答谢词
2015/01/04 职场文书
业务员年终工作总结2015
2015/05/28 职场文书
2016七一建党节慰问信
2015/11/30 职场文书
小学教师师德培训心得体会
2016/01/09 职场文书
《惊弓之鸟》教学反思
2016/02/20 职场文书
详解PyTorch模型保存与加载
2022/04/28 Python