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 相关文章推荐
js判断生效时间不得大于失效时间的思路及代码
Apr 23 Javascript
jQuery焦点图切换特效插件封装实例
Aug 18 Javascript
浅谈JavaScript函数参数的可修改性问题
Dec 05 Javascript
JS遍历ul下的li点击弹出li的索引的实现方法
Sep 19 Javascript
实例浅析js的this
Dec 11 Javascript
JS日程管理插件FullCalendar简单实例
Feb 07 Javascript
JavaScript与Java正则表达式写法的区别介绍
Aug 15 Javascript
用最简单的方法判断JavaScript中this的指向(推荐)
Sep 04 Javascript
微信小程序button组件使用详解
Jan 31 Javascript
vue 简单自动补全的输入框的示例
Mar 12 Javascript
JavaScript中var、let、const区别浅析
Jun 24 Javascript
vue与bootstrap实现简单用户信息添加删除功能
Feb 15 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
thinkPHP3.1验证码的简单实现方法
2016/04/22 PHP
PHP中for循环与foreach的区别
2017/03/06 PHP
[原创]PHP获取数组表示的路径方法分析【数组转字符串】
2017/09/01 PHP
PHP 的Opcache加速的使用方法
2017/12/29 PHP
PhpStorm 如何优雅的调试Hyperf的方法步骤
2019/11/24 PHP
PHP实现新型冠状病毒疫情实时图的实例
2020/02/04 PHP
JQuery 学习笔记 选择器之五
2009/07/23 Javascript
iframe自适应宽度、高度 ie6 7 8,firefox 3.86下测试通过
2010/07/29 Javascript
javascript中的绑定与解绑函数应用示例
2013/06/24 Javascript
Node.js中AES加密和其它语言不一致问题解决办法
2014/03/10 Javascript
js读写json文件实例代码
2014/10/21 Javascript
node.js抓取并分析网页内容有无特殊内容的js文件
2015/11/17 Javascript
NodeJS整合银联网关支付(DEMO)
2016/11/09 NodeJs
深入理解选择框脚本[推荐]
2016/12/13 Javascript
Jquery与Bootstrap实现后台管理页面增删改查功能示例
2017/01/22 Javascript
js实现适合新闻类图片的轮播效果
2017/02/05 Javascript
vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法
2017/02/22 Javascript
JS图片轮播与索引变色功能实例详解
2017/07/06 Javascript
Vue利用History记录上一页面的数据方法实例
2018/11/02 Javascript
微信小程序后端(java)开发流程的详细步骤
2019/11/13 Javascript
js面试题之异步问题的深入理解
2020/09/20 Javascript
python显示天气预报
2014/03/02 Python
Python Deque 模块使用详解
2014/07/04 Python
使用Python解析JSON数据的基本方法
2015/10/15 Python
Python爬虫模拟登录带验证码网站
2016/01/22 Python
Python之列表的插入&amp;替换修改方法
2018/06/28 Python
Python+OpenCV实现图像融合的原理及代码
2018/12/03 Python
对pandas处理json数据的方法详解
2019/02/08 Python
Django框架HttpResponse对象用法实例分析
2019/11/01 Python
德国大型箱包和皮具商店:Koffer
2019/10/01 全球购物
Javascript如何发送一个Ajax请求
2015/01/26 面试题
2015年招聘工作总结
2014/12/12 职场文书
大学生入党自荐书
2015/03/05 职场文书
网吧管理制度范本
2015/08/05 职场文书
教你一步步实现一个简易promise
2021/11/02 Javascript
Python中requests库的用法详解
2022/06/05 Python