动态表格分页

来源:互联网 发布:php批量传文件 编辑:程序博客网 时间:2024/06/07 18:16

制作表格分页或许很简单,只需要将固定的数据放上去即可完成,那么制作动态表格分页呢!
动态表格分页就是当我在代码中添加数据的时候,自动会添加页面,例如,我第一天添加的数据是15条数据,每张页面是显示五行,那么他就有三张页面,这时候我做了一个保存,那么,当我过了一个月,又有新数据需要添加的时候,如果重复的进行之前的操作,例如又有几百条数据添加,难道我就要一个一个的添加按钮,并且重复添加表格吗,那岂不是很麻烦,所以,便引出了动态表格分页的想法,说的通俗点,就是当我们插入数据的时候,他会自动计算我添加了多少条数据,需要分成多少个页面。
先来写写动态表格分页的思路把。第一步,创建一个表格(当然包括tr 和td 里面的数据随便写),第二步,制作表格已经完成,那么按钮呢?千万不要想当然哦,因为动态嘛!动态!动态!(重要的事情说三次),所以我们没有必要把按钮添加在html里,可以用javascript或者jquery来让他跟随页面自动添加上去,因此,这一步我将在接下来说,在这里仅仅是提出一个动态的概念 第三步,既然一个表格所有的内容都完成了,接下来就写动态拉。
刚才只是如何制作的一个概念,接下来就是动手去做拉,首先,制作页面,当然是要获取表格的元素拉,什么元素呢,就是tr!tr! tr! 假设每页为五行,那么我们就可以定义一个n,获取tr的长度然后除以每个页面的行,但是!,我们需要加一个1,因为我们的数据未必是整的(所以要用一个parseInt函数来进行取整),所以多出来的数据,我们要放在下一个页面,因此需要加1,那么总结下来就是一句话,var n=parseInt(tr.length/页面的行数)+1,这样就取出了页面数量。
既然一个页面为五行,可是我插入的数据有几万呢,因此,我们可以将当前页的五行显示,其他行隐藏,也就是说,当我点击该页的时候,当前页的元素显示(因为是table,这里显示就是display:table-row),其他页面的元素隐藏。
接下来就是按钮拉,既然动态添加,前面已经计算出了总页面,因此,我们可以写一个for循环,来添加按钮(可是,这里会遇到一个问题,我就放在接下去的内容里讲),怎么添加呢,jquery里有一个append函数,就可以添加到按钮后面拉,在这里简要的写一个伪代码(("").append("<button>"+i+"</button>"),for使value(“元素”).append(““+i+”“),这样,就为按钮添加了value值。
所以,接下来,就制作一个单击事件,单击的时候获取按钮的值,然后运用刚才的for循环,当我单击的时候就跳转到该按钮值的页面。这里,需要计算一下值哦!,例如,var page=$(button).val();这样我获取了元素,然后用str.length获取了tr的数目,接下来在for里面添加一个判断语句,就是我之前写到的如果一个页面显示五行,就可以写if(i>=page*4&&i<=page*4+3),这样,我就可以写出一个每页五行的表格,可是我这里写的是page*4,因此他改变的是四行。

图片

图片
这就是我写出来的效果,就是改变四行,因为第一行是一个th,即表头,因此,没有必要去改变他。
写了,那么多,或许我讲的有点不太清楚,所以在最后,我直接上代码。

图片

1 0
原创粉丝点击
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防,我是瞎子 产后抱孩子腰疼怎么办 剖腹产后5年小肚子很大怎么办 压力大工作忙瘦了怎么办? 哺乳乳房一大一小怎么办 哺乳期乳房一大一小怎么办 上班之后奶少了怎么办 出了月子还流恶露怎么办? 剖腹产2年刀疤痒怎么办 刨宫产6天伤口痒怎么办 脸的皮肤油油的怎么办 狗狗子宫蓄脓怎么办 刮宫后子宫壁薄怎么办 产妇有痔疮怎么办很疼 二胎着床在剖腹产切口怎么办 刨腹产3月后怀孕怎么办 破腹产两年了肚子还是很大怎么办 抛妇产后肚子大怎么办 破腹产后想大便怎么办 破腹产后肚子硬怎么办 在月子里同房了怎么办 胃变大凸出来了怎么办 坐完月子脊背疼怎么办 月子过后脊背疼该怎么办 怀孕的时候牙疼怎么办 练瑜伽后弯腰疼怎么办 练完瑜伽腰椎疼怎么办 瑜伽开髋动作受伤怎么办 才学瑜伽教培上课紧张怎么办 瑜伽馆不给退费怎么办 脚运动后酸痛该怎么办 婴儿误吞拉链头怎么办 肠功能蠕动慢便秘怎么办 胃肠型和蠕动波怎么办 胃不蠕动了怎么办偏方 喂母乳母亲奶头裂开怎么办 给宝宝吃奶被吃到奶头裂开怎么办 宝宝吃奶奶头裂开了怎么办 小孩吃奶奶头裂开了怎么办 站久坐久腰酸痛怎么办 孕39周胎儿头小怎么办 怀孕腰两侧长肉怎么办