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

效果图：

要点：

displayPage('#pageDiv','goPage','query',10,1,100);

#pageDiv是显示翻页的div名称。

goPage是跳转到后面的文本输入框的id，如果有需要可以根据 * 这个参数直接赋值。

query是查询的方法名称。

10是总页数

1是当前页数

100是总条数。

function query(queryPage){

//ajax查询表格需要的数据

var queryPage = queryPage||1;

console.log("query page=" + queryPage);

//重新生成pageDiv

displayPage('#pageDiv','goPage','query',10,1,100);

}

查询

用js实现的一个翻页。

使用场景：table中的数据通过ajax查询，查询完毕之后调用js生成翻页控件。

displayPage('#pageDiv','goPage','query',10,1,100);

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 = "当前第 "+page+" 页";

str += " 共 "+records+" 页";

str += " 首页";

if(page>1){

str += " 上一页";

}else{

str += " 上一页";

}

if(page

str += " 下一页";

}else{

str += " 下一页";

}

str += " 尾页";

str += " 跳转到 ";

str += " ";

$(divObj).empty();

$(divObj).append(str);

}

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

html 翻页效果,JavaScript实现翻页功能(附效果图)相关推荐

Android App开发手机阅读中实现平滑翻书效果和卷曲翻书动画实战（附源码简单易懂可直接使用）
需要图片集和源码请点赞关注收藏后评论区留言~~~ 一.平滑翻书效果与纸质书籍类似,手机上的电子书也有很多页,逐页浏览可采用翻页视图,然而翻页视图犹如一幅从左到右的绵长画卷,与现实生活中上下层叠的书籍 ...
ppt怎么把图片做成翻书效果_ppt页面翻书效果怎么做？ppt翻书效果制作
ppt页面翻书效果怎么做?ppt翻书效果制作 ppt页面翻书效果怎么做?是否早已厌烦平平常常的PPT展现方法呢?是否早已反感了没什么创意的图片展示方式呢?是否还莫有了解PPT的翻书动画效果呢?今日就和 ...
winform实现翻书效果_虚拟翻书系统解决方案
如今,越来越多的智能系统进入了人们的生活,为人们提供更多的方便与娱乐.下面为大家介绍一款虚拟翻书系统,看看它能为人们带来什么? 虚拟翻书系统解决方案目前主流的虚拟翻书系统主要设备有: 1.硬件设备: ...
android fragment实现翻书效果,viewpager实现翻页效果（fragment）
viewpager的运用核心在于适配器的编写,及最终的setadapter(adapter) 谷歌官方认为,ViewPager应该和Fragment一起使用时,此时ViewPager的适配器是Frag ...
HTML超出部分滚动效果 HTML滚动 HTML下拉附效果图
QQ技术交流群 173683866 526474645 欢迎加入交流讨论,打广告的一律飞机票 H5 效果图实现代码 <!DOCTYPE html> <html><hea ...
javascript购物车详解实现购物车完整功能(附效果图，完整代码)
前言: 我们肯定都很熟悉商品购物车这一功能,每当我们在某宝某东上购买商品的时候,看中了哪件商品,就会加入购物车中,最后结算.购物车这一功能,方便消费者对商品进行管理,可以添加商品,删除商品,选中购物车 ...
微信小程序左滑删除效果的实现完整源码附效果图
效果图: 功能描述,小程序列表左滑删除功能的实现完整源代码实现: <view wx:for='{{friends}}' wx:key="" wx:if='{{groupTyp ...
优雅的时钟翻页效果，让你的网页时钟与众不同！
你有没有想过给你的网页时钟添加翻页效果,让它更引人注目,更酷炫吗?如果是的话,你来对地方了! 子辰这篇文章将教你如何通过简单的步骤,为你的网页时钟添加翻页效果. 无论你是 web 开发初学者或是有一定 ...
unity 制作书本翻页效果
unity 制作书籍翻页效果 unity C# 翻书效果 2D 真实翻页不使用插件自制实现思路: 将书本分为两边,一边一个翻页实现: 下图为书本的右面,以OA为分界线,△OAB是下一面的如上图的 ...

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

html 翻页效果,JavaScript实现翻页功能(附效果图)相关推荐

最新文章

热门文章