jq实现table的列分页

写在前面：此方法代码不够美观，但能达到效果，以后写出更简便的代码再封装，欢迎各位大神提供更好的方法：

目前实现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>