写在前面:此方法代码不够美观,但能达到效果,以后写出更简便的代码再封装,欢迎各位大神提供更好的方法:
目前实现tr分页的插件很多,但列分页的不多,所以空闲时间自己写了一个小demo
原理:利用click事件显示和隐藏所需的列:
html部分:
<table class="table table1">
<tr class="wode">
<th>id</th>
<th>wowowowoow2</th>
<th>wowowowoow3</th>
<th>wowowowoow4</th>
<th>wowowowoow5</th>
<th>wowowowoow6</th>
<th>wowowowoow7</th>
</tr>
<tr>
<td>NO1</td>
<td>第2项</td>
<td>第3项</td>
<td>第4项</td>
<td>第5项</td>
<td>第6项</td>
<td>第7项</td>
</tr>
</table>
</div>
<button class="dianwo1">第一页</button>
<button class="dianwo">第二页</button>
<button class="dianwozuo">第三页</button>
js部分:
<script>
$(document).ready(function(){
$('tr').find('th:gt(2),td:gt(2)').hide()
})
$('.dianwo1').click(function(){
$('tr').find('th:lt(3),td:lt(3)').show()
$('tr').find('th:gt(2),td:gt(2)').hide()
})
$('.dianwo').click(function(){
$('tr').find('th:lt(3),td:lt(3)').hide()
$('tr').find('th:eq(0),td:eq(0)').show()
$('tr').find('th:gt(2),td:gt(2)').show()
$('tr').find('th:gt(4),td:gt(4)').hide()
})
$('.dianwozuo').click(function(){
$('tr').find('th:lt(5),td:lt(5)').hide()
$('tr').find('th:eq(0),td:eq(0)').show()
$('tr').find('th:gt(4),td:gt(4)').show()
$('tr').find('th:gt(6),td:gt(6)').hide()
})
</script>