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 相关文章推荐
弹出广告特效(一个IP只弹出一次)的代码
Jul 27 Javascript
javascript据option的value值快速设定初始的selected选项
Aug 13 Javascript
jQuery 学习第六课 实现一个Ajax的TreeView
May 17 Javascript
JavaScript改变HTML元素的样式改变CSS及元素属性
Nov 12 Javascript
javascript实现回到顶部特效
May 06 Javascript
jQuery实现从身份证号中获取出生日期和性别的方法分析
Feb 25 Javascript
html+js实现简单的计算器代码(加减乘除)
Jul 12 Javascript
详解vue2路由vue-router配置(懒加载)
Apr 08 Javascript
原生JS实现动态加载js文件并在加载成功后执行回调函数的方法
Dec 30 Javascript
vue+element实现表单校验功能
May 20 Javascript
js实现多张图片每隔一秒切换一张图片
Jul 29 Javascript
微信小程序实现分享商品海报功能
Sep 30 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来自动调用不同服务器上的flash
2006/10/09 PHP
PHP函数spl_autoload_register()用法和__autoload()介绍
2012/02/04 PHP
php实现快速排序法函数代码
2012/08/27 PHP
PHP生成唯一订单号
2015/07/05 PHP
windows系统php环境安装swoole具体步骤
2021/03/04 PHP
jQuery 技巧大全(新手入门篇)
2009/05/12 Javascript
JavaScript 事件查询综合
2009/07/13 Javascript
ExtJS 下拉多选框lovcombo
2010/05/19 Javascript
JS正则中的RegExp对象对象
2012/11/07 Javascript
jQuery实现简单的间隔向上滚动效果
2015/03/09 Javascript
JavaScript里实用的原生API汇总
2015/05/14 Javascript
jquery实现不包含当前项的选择器实例
2015/06/25 Javascript
jquery插件Jplayer使用方法简析
2016/04/22 Javascript
微信小程序 定义全局数据、函数复用、模版等详细介绍
2016/10/27 Javascript
理解 JavaScript EventEmitter
2018/03/29 Javascript
微信小程序下拉框功能的实例代码
2018/11/06 Javascript
使用VueRouter的addRoutes方法实现动态添加用户的权限路由
2019/06/03 Javascript
如何让微信小程序页面之间的通信不再变困难
2019/06/03 Javascript
如何在Angular8.0下使用ngx-translate进行国际化配置
2019/07/24 Javascript
Python的Django框架中设置日期和字段可选的方法
2015/07/17 Python
日常整理python执行系统命令的常见方法(全)
2015/10/22 Python
Python实现字符串的逆序 C++字符串逆序算法
2020/05/28 Python
Python 3.3实现计算两个日期间隔秒数/天数的方法示例
2019/01/07 Python
详解Python中的各种转义符\n\r\t
2019/07/10 Python
使用Python防止SQL注入攻击的实现示例
2020/05/21 Python
德国体育用品网上商店:SC24.com
2016/08/01 全球购物
营销专业应届生求职信
2013/11/26 职场文书
学校消防安全制度
2014/01/30 职场文书
飞机制造技术专业求职信
2014/07/27 职场文书
担保书范文
2015/01/20 职场文书
离职感谢信怎么写
2015/01/22 职场文书
一个都不能少观后感
2015/06/04 职场文书
获奖感言一句话
2015/07/31 职场文书
Oracle11g r2 卸载干净重装的详细教程(亲测有效已重装过)
2021/06/04 Oracle
java协程框架quasar和kotlin中的协程对比分析
2022/02/24 Java/Android
在python中读取和写入CSV文件详情
2022/06/28 Python