jq实现table的列分页

忘是亡心i 2022-06-04 04:26 211阅读 0赞

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

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

发表评论取消回复

表情：

评论列表（有 0 条评论，211人围观）

还没有评论，来说两句吧...

相关阅读

相关 Jq 页面分页

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

た入场券/ 2023年01月22日 15:47/ 0 赞/ 58 阅读

相关 JS JQ table分页器

style样式 .ul li { padding: 0 5px; height: 20px; lis

我就是我/ 2023年01月19日 08:10/ 0 赞/ 47 阅读

相关 jq分页不刷新页面_jQuery+Ajax实现无刷新分页

1、前台使用ajax无刷新分页，主要需要生成分页的工具条，这里使用的是jquery.pagination.js 下面贴出代码 /\\ \ This jQuery plug

短命女/ 2023年01月09日 12:59/ 0 赞/ 216 阅读

相关 jq实现html分页代码,jquery 分页控件实现代码

jquery分页控件 var pageindex=1; var totelsize=60; var centersize=5; var pagesize=0; var

爱被打了一巴掌/ 2022年10月06日 13:51/ 0 赞/ 270 阅读

相关 element Table+Pagination实现分页

最近做项目时，有一个新需求：做一个列表展示，并且用上分页。项目背景：前端框架是vue，我们的项目是电脑端，因此我们选择了element组件库做一个列表展示，我们首先可以

喜欢ヅ旅行/ 2022年08月30日 01:46/ 0 赞/ 326 阅读

相关分页插件_按table行分页

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

﹏ヽ暗。殇╰゛Y/ 2022年06月16日 12:46/ 0 赞/ 256 阅读

相关 jq实现table的列分页

写在前面：此方法代码不够美观，但能达到效果，以后写出更简便的代码再封装，欢迎各位大神提供更好的方法：目前实现tr分页的插件很多，但列分页的不多，所以空闲时间自己写了一个小d

忘是亡心i/ 2022年06月04日 04:26/ 0 赞/ 212 阅读

相关封装的一个jq实现表格列分页的函数

目前大部分插件都能实现行分页(tr),但一直没找到能够实现列分页（td）的插件，无奈自己封装了一个用此函数的注意事项： 1，table必须要有class="column\

妖狐艹你老母/ 2022年05月28日 08:53/ 0 赞/ 199 阅读

相关 tp5+ajax+jq实现无刷新分页

> tp5框架里面自带有panigate()+rende()的方法可以超简单的实现分页，但是就是看着一直要刷新很不爽，所以找了网上的好多代码，终于找到了一个逻辑简单的无刷新分页

- 日理万妓/ 2022年05月08日 21:06/ 0 赞/ 316 阅读

相关 bootstrap table分页

1. 客户端分页 1) js页面 sidePagination : "client", // 设置在哪里进行分页，可选值为"client" 或者 "serv

小鱼儿/ 2022年04月23日 05:08/ 0 赞/ 309 阅读