原生分页

今天心情波荡起伏,想了好多,但是心不能变,学习还得学习。称为合格的前端开发人员,应该时刻保持着清醒的大脑和向前看的思想,有错要改,每天都要去学,知识是无穷的,人生是要走的,生活应该是美好的。学会看的开,看的远。慢慢学,慢慢进步。

分页每一个移动端的商场页面基本上都用的上,会原生,就都会了。jquery就相对更简单了。淘宝的详情页面就会用的到。就不截图了。

首先来看一下代码结构


一个table标签,里面有一些数据
下方的分页单,默认进来第一页,要有个样式,就写在了行内样式

样式(style)  样式大家看一下,可以先想想它的大致图形是什么样

里面有一个属性选择器,大家不经常使用

效果就是下面的样式


刚开始进来是默认第一页

下面的代码是给t-body里面进行赋值

1、先通过Ajax请求文件,然后把获得的数据进行给tr  和  td f赋值,再把tr  td 进行appendTo到body中,中间应该有更新数据的功能,因为每请求一页,获得的数据就是不一样的,请求函数中应该有这种功能

updateUI( rusult)  就是更新数据的方法

可以看到 url 后面的参数就是来判定各个页数中的数据,请求的是哪一页,就返回相应的数据,数据作为参数来传给function updateUI(rusult ){  },然后进行遍历数据,创建节点,赋值,添加到body上面

给每一个分页按钮添加点击事件,并声明一个页数的变量进行后期判断

按钮点击事件和判断变量的声明,记住全局变量

然后就行分页判断,当点击按钮的innerHTML == “相应的内容” 就是点击这个按钮  进行相应的改变,首页的时候 让 pageN0 = 1;下一页,上一页分别进行减和加,尾页是显示最后一页,最后就是点击那一页就显示那一页

显示和消失的情况,是第一页的时候,把 上一页和首页去掉,最后一页的时候把尾页和下一页去掉,其他的情况都显示

按钮样式的动态 的设置,点击哪一页样式就改变,其他的样式不变

loadDta是window的方法

刚开始进来是走的第一页

全局中写,跳出刚才的函数

演示一下效果

gif.gif

谢谢 观看    来个笑话:

1、上算术课的时候,老师问低能儿阿呆道:“1+1等于多少?”

阿呆想了一想,回道:“老师!我不知道。”

老师怒了,说:“你真是个饭桶!连这个题目也算不出来。我再问你:譬如我加你是多少呢?”

阿呆道:“这个我知道,两个饭桶。”


好冷  ,昨天下了一场雪











最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,190评论 1 92
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 15,657评论 4 61
  • 今天,2017 年云栖大会在云栖小镇正式开幕。会上,阿里巴巴 CTO 王坚发表了主题为《城市大脑:数据重塑城市未来...
    TGO鲲鹏会阅读 556评论 0 0
  • 每晚我都会深深凝望,我 欣悦的并不再是那璀璨的星空,而是悲痛的回忆! 无助的眼眸散发出闪烁的光芒,似有若无,如繁...
    纤小墨阅读 374评论 0 1

友情链接更多精彩内容