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

jquery table(切换标签) 封装了切换代码,可以同个页面实现多个标签切换 立即下载

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

用此函数的注意事项:

1,table必须要有class="column_paging_table"class

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

<div class="yema">

<!-- <button class="page_bt"></button> -->

<div>

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

html代码如下:

<table class="table column_paging_table">
      <tr>
        <th>id</th> 
      </tr>
      <tr>
        <td>第1项</td>
      </tr>
      <tr>
        <td>第1项</td>
      </tr>
      <tr>
        <td>第1项</td>
      </tr>

</table>  
//分页按钮
<div class="yema">
      <!-- <button class="page_bt"></button> -->
</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()

            })
          }




使用jquery实现表格动态分页 利用jquery实现表格动态分页,前台用jquery实现。后台用java实现动态查询数据,分页。 立即下载

相关推荐

jQuery插件PagedTable实现表格分页

NULL 博文链接:https://hiandroid.iteye.com/blog/792062

jquery+ajax分页函数封装(后端分页)

看了很多网上的各种分页插件,代码来量多不说,而且还要配置各种参数,相信很多小伙伴都被搞晕了吧!其实后端分页就是给后端传两个参数:pageNo第几页,pageSize每页显示多少条,一般情况下pageSize是固定的每页显示10条,20条,50条等,这个和后端小哥哥定好就可以了,话不多说我直接上代码&lt;div class="container" style=""&gt; &lt;div clas...

sdiudui的博客 755

一个对html表格分页的类

可以将一个已经生成的html表格转化成可分页和查询的表格完全用js实现不涉及任何后台技术,不支持ajax。

javascript(jquery)实现前台html简单的分页封装

/**  * 手机端列表的分页功能  *  url 后台取数据链接  * formid 表单的id  * target 存放数据的目标div的id  * initload 是否初始化加载数据(现在总是设为true)  * pagesize 每页的数据条数  * click 列表的单击事件  * col  显示的数据列 字段  * type 分页的样式(目前有2、3两种样式) 

石羊博客专栏 849

对table和ul实现js分页示例分享

本文主要介绍了js对table和ul li实现前台分页,需要的朋友可以参考下

Spring Boot集成Jasypt踩坑实录:自定义SM4加密器Bean加载失败的终极解决方案

本文深入剖析了Spring Boot集成Jasypt时自定义SM4加密器Bean加载失败的根源,即Spring Boot启动流程中Bean加载顺序与Jasypt自动配置的时序冲突。文章提供了三种从源码层面解决问题的有效方案,包括使用ApplicationContextInitializer提前注册、调整Bean依赖顺序以及自定义PropertySource处理机制,并给出了完整的国密SM4加密器实现与测试示例。

weixin_29294975的博客 200

jquery封装table插件

http://www.jb51.net/article/75453.htm

夕阳无限好 1066

单片机入门说明书:从本质到架构,一文看透MCU核心原理

其实你每天用的洗衣机、刷的智能门锁、开的汽车里,都藏着它的身影。相当于工厂里的“运输轨道”,CPU算出的结果通过总线送到RAM存储,ROM里的程序通过总线传给CPU执行,外设的信号通过总线交给CPU处理,整个过程每秒能重复上百万次,确保各模块协同高效。高端单片机(比如STM32F4系列)还会配备DMA(直接存储器访问)单元,相当于“专用传送带”——不需要CPU干预,就能直接让外设和RAM之间传输数据(比如让ADC采集的温度数据直接存进RAM),大大降低CPU负担,让CPU能专注处理更重要的任务。

IAMIF12的博客 1041

利用jQuery进行分页(将商品全部信息显示在表格,并进行分页)

个人理解: 1、一个页面是一个对象,有一些属性(总页数、当前页、每页记录数、总记录数、每页显示的记录 即记录集(Commodity)) 2、Commodity也是一个对象,只不过这个对象是页面的属性而已,Commodity也有一些属性(价格、名称、评价等) 3、通过数据库查询得到Commodity这个对象的属性的值,然后将Commodity对象,作为属性值,放到页面的记录集属性里面去 4、然后将页面的值传到前端,显示出来 首先要创建两个实体类,我放在pojo包里面了: Commodity.class(定

qq_45634989的博客 737

从DBC到ARXML:用RTA-CAR7实现车载通信协议栈自动化生成全流程

本文详细介绍了如何利用ETAS RTA-CAR7工具链,特别是ISOLAR-A和RTA-BSW ConfGen,实现从车载通信DBC文件到AUTOSAR ARXML系统描述文件,再到基础软件(BSW)协议栈代码的自动化生成全流程。该流程通过深度配置、信号路由、PDU复用及规则定制,大幅提升开发效率与一致性,是应对现代汽车电子复杂网络开发的关键实践。

brandy的博客 220

快速理解STLink引脚图中复位引脚作用

深入讲解STLink引脚图中复位引脚的实际用途,帮助开发者快速掌握其在调试与下载过程中的关键作用,结合stlink引脚图理解更高效。

weixin_32324637的博客 1326

jQuery封装插件自动生成表格案例

index部分代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> tr, th, td { border: 1px solid blue; } </style>

厚积薄发. 495

STM32 无线充电接收端硬件设计:从 LC 谐振到 PWM 控制的 5 大关键电路解析

本文深入解析了基于STM32的无线充电接收端硬件设计,重点探讨了LC谐振倍压整流、INA282电流采样、IR2104S半桥驱动、超级电容保护及STM32最小系统等5大关键电路。针对超级电容的恒功率充电需求,详细介绍了PID控制算法优化及PCB设计实战要点,帮助工程师提升无线充电系统的效率和可靠性。

weixin_31774841的博客 384

jq实现table的列分页

写在前面:此方法代码不够美观,但能达到效果,以后写出更简便的代码再封装: 目前实现tr分页的插件很多,但列分页的不多,所以空闲时间自己写了一个小demo 原理:利用click事件显示和隐藏所需的列: html部分:               id         wowowowoow2         wowowowoow3         wowowowoow4

wangle_style的博客 1000

BlockUI专栏目录

BlockUI是一个设计NX对话框的工具,是官方推荐使用的对话框制作方法,能够与NX自身风格相统一,并且在实际开发中经常被使用。BlockUI可以帮助用户快速创建NX对话框,支持多种控件类型,如按钮、文本框、标签等。通过使用BlockUI,用户可以轻松地自定义对话框的布局、样式和交互行为。此外,BlockUI还提供了一些高级功能,如动态更新、条件显示和事件处理等,以帮助用户创建更加复杂和灵活的对话框。本专栏讲述了使用BlockUI制作NX对话框的方法,介绍了每个控件的功能,并且分享一些常用操作的源码。

王牌飞行员_里海的博客 1634

vue2/3 - 详细实现内网使用离线高德地图功能,在vue中无需网络离线使用高德地图相关功能,高德地图如何离线加载详细教程(内网部署及使用),提供最新完整的瓦片资源下载及相关工具(示例代码,一键复制

vue,vue2,vue3,高德地图,离线使用高德地图,高德地图瓦片官方下载,vue内网使用高德地图离线无网络,断网情况下使用高德地图,vue离线高德地图教程,如何实现内网部署高德地图,无需联网离线使用,vue+ts实现离线高德地图 内网离线高德地图,如何在高德地图Vue项目中下载离线地图,高德离线地图加载不出来,高德地图离线使用不显示怎么办,怎么解决vue内网使用离线高德地图加载失败问题,vue实现离线地图+高德瓦片,vue引入高德离线地图,vue项目如何使用离线高德地图和自定义地图样式,高德离线地图的下

✅ 精选推荐文章 1万+

js/jq动态创建表格的行与列

之前做了一个项目,需求是能动态创建表格行,动态创建表格的列,度了很多资料,都没有动态创建列的插件,所以自己动手写了一个 需求大概是(下图) 1.动态添加一行、2.动态添加一列,3.删除行、4.删除列,5.复制行,6.表头的选项是可自定义写入,7.表格的数据可后台传入,也可写入,8.提交数据到后台 //html文件(首先写在html文件中写好表格结构代码,后面再把注释掉的html压缩写到js文件中进行插件的封装) <div class="creta-table"></div>

liudanyang_21的博客 914

Probability and Statistics - 4th edition

Probability and Statistics - 4th edition

php 无刷新表格,基于jQuery实现的无刷新表格分页实例_jquery

本文实例讲述了基于jQuery实现的无刷新表格分页。分享给大家供大家参考,具体如下:效果图如下:html结构:css样式:html,body{margin: 0;padding:0}a:focus {outline: none;}/* 通用表格显示 */table, th, td {font: 12px Arial,Helvetica,sans-serif,'宋体';margin: 0;paddi...

weixin_35548251的博客 164

ssm框架搭建

这个是一个在idea上成功跑起来的ssm框架项目,保存在这里方便以后使用直接下载

RU DOS版、EFI版32bit/64bit BIOS常用工具

DOS版、EFI版的RU工具,可用来查看IO、MEM、PCI、SMBIOS等资源。亲测在EFI SHELL下可用。

html表格列拖拽,一个可拖拽列宽表格实例演示

body{font:12px/1.5 Tahoma;}#gannt_left{width:500px;}#left-scroll-panel{width:520px;height:100px;overflow-y: auto;}table{table-layout:fixed;border-collapse: collapse;border-spacing: 0px;text-align:cent...

weixin_32821533的博客 857

华为的C语言编程规范.pdf

华为技术有限公司内部技术规范。本规范制定了编写C语言程序的基本原则、规则和建议。从代码的清晰、简洁、可测试、安全、程序效率、可移植各个方面对C语言编程作出了具体指导。

jq插件:jqgrid和validform的二次封装

做久了vue和react框架项目,偶尔也需要做做原生的项目。不可否认vue的双向绑定机制确实很香,但是也是建立在原生js基础上。所以,只有做更多的原生js项目,才能更加了解vue框架的底层原理。在日常开发中,也会不可避免的会遇到原生开发的需求。这里主要介绍下jqgrid和validform这两种插件的用法及二次封装。

qq_34761385的博客 1370

jquery 组件 PHP,jquery 求教:如何去思考一个JQ的组件封装?

如何去思考一个JQ的组件封装?想请教一个比较详细的思路,我自身在思考的时候对于这个学习没有一个太理想的思路。主要是在JS的代码结构规划上面。比如:我有一个表格,里面放进了数量,名字,高度,宽度,等等一系列的数据,数据格式object,array,number,fn()等等各种都有。在外面调用这个组件时根据传入的数据将对应的信息显示出来。这是一个别人封装的插件样例:(function($,und...

weixin_36411884的博客 147

分页查询的简单实现

分页查询的简单实现分页查询无非有两种实现方式: 1. 将数据库中全部数据读取出来, 在分段获取 2. 直接读取需要显示的数据条数使用第一种方法需要专门的缓存服务器, 第二种方法适用在小流量使用的情况,这里简单的使用第二种方法实现。 流程: 1. 获取总记录数 2. 前端计算分页 3. 传递第几页,对应查询 4. 返回封装好的json实例项目框架: Hibernate SpringMVC

一个默默的人 1788

vue怎么在一个页面里写两个表格_使用VUE一年后

从去年年底开始接触VUE,到现在已经整整一年了。这也是我接触的第一个MVVM的框架。在这之前,我也是长期执迷于JQ大法,在项目中尝试过一些常见的UI框架:MiniUI 这是一个很好用的框架,可惜收费较贵,排除这一点,肯定是JQ时代的首选EasyUI 用过一次,复杂的API设计让我败下阵来Bootstrap 上手快,文档详细,但交互上太弱LayUI 近几年新出来的框架,功能丰富,接口简洁,很值得一试...

weixin_33462804的博客 2848

基于jqPaginator分页插件Boostrap分页样式TABLE表格操作

首先需要头文件:引入jqPaginator-js文件、Boostrap样式-css文件。 //分页 <script src="http://www.jq22.com/demo/jqPaginator-master201703111100/js/jqPaginator.js"></script> //样式 <link rel="stylesheet" href="h...

肖恩大肥羊 798

jquery.dataTables表格列动态显示隐藏封装(二)

jQuery.dataTables 提供了列的显示隐藏方法。  做过企业管理项目前台的程序员可能都知道,许多用户在查看一些业务数据的时候,喜欢将表格不关心的数据进行隐藏。便于信息的比对与查看。在此我对jquery.dataTables的控件做了一个简单的封装,将表格列的显示与隐藏功能做成一个小的控件,先看下效果图。  点击checkbox 将勾去掉则将该列进行隐藏,勾上则表示将该列进行

liudeleigh的专栏 837
上一篇: 新版vue-cli如何使用json-server来mork
下一篇: better-scroll在vue中实现原生滚动和上拉/下拉加载的效果
wangle_style
博客等级 码龄9年 79粉丝 60原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值