四种效果的响应式jQuery分页表格插件

一款四种效果的响应式jQuery翻页表格插件，自适应页面的窗口大小来改变样式，可以输入需要跳转的页面数字然后点击按钮跳转，表格和分页的样式均可以自由调整，适用于需要表格显示数据的页面场景，喜欢的童鞋请收下吧。

分类：表单代码 > 输入框难易：初级

查看演示下载资源下载积分： 20 积分

页面的head部分，需引入font-awesome图标字体库、两个必要的CSS样式文件、jQuery库和3个必要的JS文件，代码如下：

<link type="text/css" rel="stylesheet" href="css/font-awesome.4.6.0.css">
<link type="text/css" rel="stylesheet" href="css/jquery.paginate.css" />
<link type="text/css" rel="stylesheet" href="css/jquery.yhhdatatable.css" />
<script src="js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/jquery.paginate.js" ></script>
<script type="text/javascript" src="js/jquery.yhhdatatable.js" ></script>
<script type="text/javascript" src="js/index.js" ></script>

页面的body部分，设置好table表格容器和数据即可，代码如下：

<table id="testtable1">
	<thead><tr>
		<th>1</th>
	</tr></thead>
	<tbody>
		<tr><td>1</td></tr>
		<tr><td>1</td></tr>
		<tr><td>1</td></tr>
		<tr><td>1</td></tr>
        <tr><td>1</td></tr>
		<tr><td>1</td></tr>
        <tr><td>1</td></tr>
		<tr><td>1</td></tr>
        <tr><td>1</td></tr>
		<tr><td>1</td></tr>
		
        <tr><td>2</td></tr>
		<tr><td>2</td></tr>
		<tr><td>2</td></tr>
		<tr><td>2</td></tr>
        <tr><td>2</td></tr>
		<tr><td>2</td></tr>
        <tr><td>2</td></tr>
		<tr><td>2</td></tr>
        <tr><td>2</td></tr>
		<tr><td>2</td></tr>
        
        <tr><td>3</td></tr>
		<tr><td>3</td></tr>
		<tr><td>3</td></tr>
		<tr><td>3</td></tr>
        <tr><td>3</td></tr>
		<tr><td>3</td></tr>
        <tr><td>3</td></tr>
		<tr><td>3</td></tr>
        <tr><td>3</td></tr>
		<tr><td>3</td></tr>
        
        <tr><td>4</td></tr>
		<tr><td>4</td></tr>
		<tr><td>4</td></tr>
		<tr><td>4</td></tr>
        <tr><td>4</td></tr>
		<tr><td>4</td></tr>
        <tr><td>4</td></tr>
		<tr><td>4</td></tr>
        <tr><td>4</td></tr>
		<tr><td>4</td></tr>
        
        <tr><td>5</td></tr>
		<tr><td>5</td></tr>
		<tr><td>5</td></tr>
		<tr><td>5</td></tr>
        <tr><td>5</td></tr>
		<tr><td>5</td></tr>
        <tr><td>5</td></tr>
		<tr><td>5</td></tr>
        <tr><td>5</td></tr>
		<tr><td>5</td></tr>
        
        <tr><td>6</td></tr>
		<tr><td>6</td></tr>
		<tr><td>6</td></tr>
		<tr><td>6</td></tr>
        <tr><td>6</td></tr>
		<tr><td>6</td></tr>
        <tr><td>6</td></tr>
		<tr><td>6</td></tr>
        <tr><td>6</td></tr>
		<tr><td>6</td></tr>
	</tbody>
</table>

<table id="testtable2">
	<thead><tr>
		<th>1</th><th>2</th><th>3</th><th>4</th><th>5</th>
	</tr></thead>
	<tbody>
		
	</tbody>
</table>

<table id="testtable3">
	<thead><tr>
		<th>1</th><th>2</th><th>3</th><th>4</th><th>5</th>
	</tr></thead>
	<tbody>
		
	</tbody>
</table>

<table id="testtable4">
	<thead><tr>
		<th>1</th><th>2</th><th>3</th><th>4</th><th>5</th>
	</tr></thead>
	<tbody>
		
	</tbody>
</table>