动态表格分页

制作表格分页或许很简单，只需要将固定的数据放上去即可完成，那么制作动态表格分页呢！

动态表格分页就是当我在代码中添加数据的时候，自动会添加页面，例如，我第一天添加的数据是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，即表头，因此，没有必要去改变他。

写了，那么多，或许我讲的有点不太清楚，所以在最后，我直接上代码。