脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js 翻页功能

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

 更新时间：2017年02月16日 10:40:57   作者：全栈未遂工程师  
这篇文章主要介绍了JavaScript实现翻页功能(附效果图)，在项目需求中经常遇到，今天小编抽时间给大家分享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 = "当前第&ensp;<span name='page'>"+page+"</span>&ensp;页";
  str += "&ensp;共&ensp;<span name='total'>"+records+"</span>&ensp;页";
  str += "&ensp;<a href='javascript:void(0)' onclick='"+js+"(1)'>首页</a>";
  if(page>1){
    str += "&ensp;<a href='javascript:void(0)' onclick='"+js+"("+(page-1)+")'>上一页</a>";
  }else{
    str += "&ensp;<a>上一页</a>";
  }
  if(page<records){
    str += "&ensp;<a href='javascript:void(0)' onclick='"+js+"("+(page+1)+")'>下一页</a>";
  }else{
    str += "&ensp;<a>下一页</a>";
  }
  str += "&ensp;<a href='javascript:void(0)' onclick='"+js+"("+records+")'>尾页</a>";
  str += "&ensp;跳转到&ensp;<input type='number' min=1 max="+records+" id='"+inputId+"' value="+page+" style='width:40px'/>";
  str += "&ensp;<input type='button' value='go' onclick='var num=$(\"#"+inputId+"\").val();"+js+"(num)'/>";
  $(divObj).empty();
  $(divObj).append(str);
}

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

您可能感兴趣的文章:

相关文章

  • JavaScript栏目列表隐藏/显示简单实现

    JavaScript栏目列表隐藏/显示简单实现

    隐藏侧边栏，并将图片换成右箭头图片;显示侧边栏，并将图片换成左箭头，这样的效果想必大家都很熟悉吧，接下来实现下，感兴趣的朋友可以参考下哈
    2013-04-04
  • js实现鼠标拖动图片并兼容IE/FF火狐/谷歌等主流浏览器

    js实现鼠标拖动图片并兼容IE/FF火狐/谷歌等主流浏览器

    js实现鼠标拖动图片做了兼容IE，FF火狐，谷歌等主流浏览器，具体实现代码如下，感兴趣的朋友可以参考下哈，希望对你有所帮助
    2013-06-06
  • js闭包和垃圾回收机制示例详解

    js闭包和垃圾回收机制示例详解

    这篇文章主要给大家介绍了关于js闭包和垃圾回收机制的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03
  • TypeScript新特性之using关键字的使用方法

    TypeScript新特性之using关键字的使用方法

    TypeScript 5.2版本中新添加了using关键字,目前该关键字的提案也进入了ECMAScript的Stage 3,也就是说很快就会进入JavaScript语言本身中,using和const, let和var一样都是用于变量声明的,那么它到底有什么与众不同的地方呢,本文给大家介绍的非常详细
    2023-11-11
  • JavaScript循环链表实现方法

    JavaScript循环链表实现方法

    这篇文章主要给大家介绍了关于JavaScript循环链表实现的相关资料,循环链表和单向链表很相似,唯一的区别是循环链表的尾节点是指向头节点的,需要的朋友可以参考下
    2023-07-07
  • JavaScript小技巧整理

    JavaScript小技巧整理

    这篇文章主要介绍了JavaScript小技巧,整理汇总了JavaScript常用的6个实用技巧,属于JavaScript边角技巧的总结,需要的朋友可以参考下
    2015-12-12
  • JS学习笔记之贪吃蛇小游戏demo实例详解

    JS学习笔记之贪吃蛇小游戏demo实例详解

    这篇文章主要介绍了JS学习笔记之贪吃蛇小游戏demo,结合实例形式详细分析了javascript实现贪吃蛇小游戏的原理、步骤与相关实现技巧,需要的朋友可以参考下
    2019-05-05
  • 微信小程序6位或多位验证码密码输入框功能的实现代码

    微信小程序6位或多位验证码密码输入框功能的实现代码

    这篇文章主要介绍了微信小程序6位或多位验证码密码输入框功能的实现代码,实现思路很简单，需要的朋友可以参考下
    2018-05-05
  • javascript控制在光标位置插入文字适合表情的插入

    javascript控制在光标位置插入文字适合表情的插入

    使用javascript控制在光标位置插入文字，在实现表情的插入时会用到的,需要的朋友可以参考下
    2014-06-06
  • ES6字符串的扩展实例

    ES6字符串的扩展实例

    这篇文章主要介绍了ES6字符串的扩展实例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-12-12

最新评论