动态表格分页

制作表格分页或许很简单,只需要将固定的数据放上去即可完成,那么制作动态表格分页呢!
动态表格分页就是当我在代码中添加数据的时候,自动会添加页面,例如,我第一天添加的数据是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,即表头,因此,没有必要去改变他。
写了,那么多,或许我讲的有点不太清楚,所以在最后,我直接上代码。

图片

  • 4
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值