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

前端之家收集整理的这篇文章主要介绍了JavaScript实现翻页功能(附效果图)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

效果图:

要点:

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

page.js

显示翻页的div,默认body。如:#pageDiv * inputId:@R_827_404@面的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 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

猜你在找的JavaScript相关文章