原生JS完成假分页

     最近这个项目页面要用Bootstrap，但是目前浏览器对BootStrap支持度还不够，所以就需要自己写分页，不过好在有分页的基本原理，还是简单的，下面记录一下代码。

先看一下分页的效果：

    

    从分页的原理来看，首先需要几个变量，分别是总条数、总页数、当前页数和每页显示多少条。因为是假分页，所以还需要传入查询得到的数据集。然后就是给每个超链接添加方法，计算该页应该显示哪些数据。

    根据这个原理看，有两种方式来做。第一种：查询得到数据集后，把数据集传给分页的方法，执行完分页操作后，返回一个新的数据集，通过回调函数来拼接table。第二种是单独写分页操作方法，这个方法中只给首页、尾页等四个超链接注册了方法，只执行返回页数的操作，然后在单独一个方法里面做切割数据集的操作。其实两种方法原理是一样，只不过需求不同，实现的方式不同罢了。

第一种：

页面样式：

<div id="page">
	<p>
		<span style="left: 64%; position: absolute;">共<span id="totalCount"></span>条     第<span id="currentpage"></span>页/共<span id="totalPage"></span>页</span>
		<a id="home" style="left: 79%; position: absolute;" href="#">首页</a>
		<a id="prev" style="left: 82%; position: absolute;" data-toggle="modal" data-target="#myModal" href="#">上一页</a> 
		<a id="next" style="left: 86%; position: absolute;" data-toggle="modal" data-target="#myModal"  href="#">下一页</a>
		<a id="lastPage" style="left: 90%; position: absolute;" href="#">尾页</a>
	</p>
</div>
<div id="unPage" style="display: none;" class="lb_fy_right_msg">
	<span>当前页无数据</span>
</div>