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 相关文章推荐
JavaScript动态调整TextArea高度的代码
Dec 28 Javascript
JS 仿腾讯发表微博的效果代码
Dec 25 Javascript
AngularJS基础知识
Dec 21 Javascript
浅析jQuery Ajax请求参数和返回数据的处理
Feb 24 Javascript
简单的js计算器实现
Oct 26 Javascript
js es6系列教程 - 基于new.target属性与es5改造es6的类语法
Sep 02 Javascript
Vue+jquery实现表格指定列的文字收缩的示例代码
Jan 09 jQuery
cdn模式下vue的基本用法详解
Oct 07 Javascript
JavaScript 处理树数据结构的方法示例
Jun 16 Javascript
vue给对象动态添加属性和值的实例
Sep 09 Javascript
vue中对象数组去重的实现
Feb 06 Javascript
JS PHP字符串截取函数实现原理解析
Aug 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
谈谈PHP语法(3)
2006/10/09 PHP
php Xdebug 调试扩展的安装与使用.
2010/03/13 PHP
PHP 开发环境配置(Zend Studio)
2010/04/28 PHP
UCenter中的一个可逆加密函数authcode函数代码
2010/07/20 PHP
php禁止浏览器使用缓存页面的方法
2014/11/07 PHP
laravel 5.3 单用户登录简单实现方法
2019/10/14 PHP
JavaScript读取中文cookie时的乱码问题的解决方法
2009/10/14 Javascript
通过jQuery打造支持汉字,拼音,英文快速定位查询的超级select插件
2010/06/18 Javascript
js模拟select下拉菜单控件的代码
2013/05/08 Javascript
解析js原生方法创建表格效率测试
2013/07/08 Javascript
JS 两个字符串时间的天数差计算
2013/08/25 Javascript
jquery对单选框,多选框,文本框等常见操作小结
2014/01/08 Javascript
JS+CSS实现Li列表隔行换色效果的方法
2015/02/16 Javascript
浅谈js数组和splice的用法
2016/12/04 Javascript
vue实现表格数据的增删改查
2017/07/10 Javascript
使用use注册Vue全局组件和全局指令的方法
2018/03/08 Javascript
vue 组件使用中的一些细节点
2018/04/25 Javascript
微信小程序时间控件picker view使用详解
2018/12/28 Javascript
jQuery实现左右两个列表框的内容相互移动功能示例
2019/01/27 jQuery
vue组件中watch props根据v-if动态判断并挂载DOM的问题
2019/05/12 Javascript
使用vue cli4.x搭建vue项目的过程详解
2020/05/08 Javascript
微信小程序用户盒子、宫格列表的实现
2020/07/01 Javascript
小程序自定义弹框效果
2020/11/16 Javascript
[35:39]完美世界DOTA2联赛PWL S2 FTD.C vs Rebirth 第二场 11.22
2020/11/24 DOTA
python导入pandas具体步骤方法
2019/06/23 Python
pyinstaller打包程序exe踩过的坑
2019/11/19 Python
python实现宿舍管理系统
2019/11/22 Python
jupyter notebook读取/导出文件/图片实例
2020/04/16 Python
keras处理欠拟合和过拟合的实例讲解
2020/05/25 Python
意大利奢侈品网站:Italist
2016/08/23 全球购物
如何设定的weblogic的热启动模式(开发模式)与产品发布模式
2012/09/08 面试题
会展中心部门工作职责
2013/11/27 职场文书
留学自荐信写作方法
2014/01/27 职场文书
家长对孩子的评语
2014/04/18 职场文书
工作粗心大意检讨书
2014/09/18 职场文书
MySQL学习总结-基础架构概述
2021/04/05 MySQL