微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

效果图:

要点:

rush:js;"> displayPage('#pageDiv','goPage','query',10,1,100);
  • #pageDiv是显示翻页的div名称
  • goPage是跳转到后面的文本输入框的id,如果有需要可以根据 * 这个参数直接赋值。
  • query是查询方法名称
  • 10是总页数
  • 1是当前页数
  • 100是总条数。
rush:js;"> <%@ 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+"/";%>
用js实现的一个翻页
使用场景:table中的数据通过ajax查询查询完毕之后调用js生成翻页控件。
displayPage('#pageDiv',100);

page.js

rush: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 = "当前第 "+page+" 页"; str += " 共 "+records+" 页"; str += " 首页"; if(page>1){ str += " 上一页"; }else{ str += " 上一页"; } if(page下一页"; }else{ str += " 下一页"; } str += " 尾页"; str += " 跳转到 "; str += " "; $(divObj).empty(); $(divObj).append(str); }

以上所述是小编给大家介绍的JavaScript实现翻页功能(附效果图)。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

原文地址:https://www.jb51.cc/js/41606.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐