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

妖狐艹你老母 2022-05-28 08:53 176阅读 0赞

目前大部分插件都能实现行分页(tr),但一直没找到能够实现列分页（td）的插件，无奈自己封装了一个

用此函数的注意事项：

1，table必须要有class="column\_paging\_table"class

2，分页按钮必须是如下结构(class="yema"和class="page\_bt")不能变，样式可以自行天马行空

<div>

3，其中传的参数pagenumber是一页要显示几列，传几就显示几列

html代码如下:

</table>    
//分页按钮  
<div class="yema">  
        
</div>

js封装代码如下：

function lie\_fenye(pagenumber)\{  
            //获取一共有多少列  
            var lie\_zong=parseInt($('.column\_paging\_table tr:eq(2)').find('td').length-1)  
            //根据总列数和每页的列数计算一共多少页  
            var page\_size=Math.floor(lie\_zong/pagenumber)+1  
            //每页的列数-1并赋值给一个变量，作为首次加载的列显示变量  
            var liexianshi=pagenumber-1  
            //根据总页数循环渲染出分页按钮  
            for( var i=0;i<page\_size;i++)\{  
              var j=i+1  
              var ye\_biaoqian='<button class="page\_bt">第'+j+'页</button>'  
              $('.yema').append(ye\_biaoqian)  
            \}  
            //利用事件监听，当点击某一个分页按钮时相应显示表格列  
            $('.yema').on('click','.page\_bt',function()\{  
              //获取当前点击分页按钮的索引值  
              var now\_pagenum=$(this).index()  
              //根据当前分页按钮索引值计算下面三个控制显示的变量  
              var now\_pagenum1=now\_pagenum\*pagenumber-1  
              var now\_pagenum2=now\_pagenum1+pagenumber  
              var now\_pagenum3=now\_pagenum1+1  
              //判断点击的是第一页还是除第一页以外的页  
              if (now\_pagenum==0) \{

pagenumber\_=pagenumber-1

pagenumber\_first=pagenumber+1

$('.column\_paging\_table tr').find('th:gt('+pagenumber\_+'),td:gt('+pagenumber\_+')').hide()

$('.column\_paging\_table tr').find('th:lt('+pagenumber+'),td:lt('+pagenumber+')').show()

//此为固定显示第一列  
                // $('.column\_paging\_table tr').find('th:lt('+pagenumber\_first+'),td:lt('+pagenumber\_first+')').show()

\}else\{  
                $('.column\_paging\_table tr').find('th:gt('+now\_pagenum1+'),td:gt('+now\_pagenum1+')').show()  
                $('.column\_paging\_table tr').find('th:gt('+now\_pagenum2+'),td:gt('+now\_pagenum2+')').hide()

$('.column\_paging\_table tr').find('th:lt('+now\_pagenum3+'),td:lt('+now\_pagenum3+')').hide()

//此为固定显示第一列  
                // $('.column\_paging\_table tr').find('th:eq('+0+'),td:eq('+0+')').show()

\}  
            \})  
            //首次加载要显示的列  
             $(document).ready(function()\{

$('.column\_paging\_table tr').find('th:gt('+liexianshi+'),td:gt('+liexianshi+')').hide()

//此为固定显示第一列  
              // $('.column\_paging\_table tr').find('th:gt('+pagenumber+'),td:gt('+pagenumber+')').hide()

\})  
          \}