表格排序组件tablesorter使用的步骤详解

这次给大家带来表格排序组件tablesorter使用的步骤详解,表格排序组件tablesorter使用的注意事项有哪些,下面就是实战案例,一起来看一下。

一、引入文件 

   

登录后复制

效果如图:
表格排序组件tablesorter使用的步骤详解 
二、标准的HTML表格,必须包括thead和tbody标签


登录后复制 

  

Name

 

Sex

 

Address

  

   zhangsan boy beijing   lisi girl shanghai   …略   

三、设置table可排序

$(document).ready(function(){ //第一列不进行排序(索引从0开始) $.tablesorter.defaults.headers = {0: {sorter: false}}; $(".tablesorter").tablesorter(); });

登录后复制

补充说明:
在使用过程遇到的一个问题,我的表格数据是通过ajax获取的,首页进行排序的时候没问题
当进行下一页排序的时候,会把上页的数据也重新显示出来,解决这个问题可以在你ajax获取数据之后
触发”update”事件,代码如下:

$(".tablesorter").trigger("update");

登录后复制

以上问题着实头疼了很久,刚开始用的官网上的Pager plugin,发现这个不太合适。
又网上查资料 整理以下代码:

$(".tablesorter tbody tr").addClass("delete"); $(".tablesorter tbody tr.delete").remove(); $("table tbody").append(html); $(".tablesorter").trigger("appendCache"); $(".tablesorter").trigger("update"); $(".tablesorter").trigger("sorton",[[[2,1],[0,0]]]);

登录后复制

于是都用上了,久经测试 发现只有$(“.tablesorter”).trigger(“update”);这一句能解决问题
其他的不知道是什么东东。

相信看了本文案例你已经掌握了方法,更多精彩请关注【创想鸟】其它相关文章!

推荐阅读:

jquery对table中数据的操作方法详解

JQuery表格进行操作有有哪些技巧

以上就是表格排序组件tablesorter使用的步骤详解的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2768655.html

(0)
上一篇 2025年3月8日 12:07:24
下一篇 2025年3月8日 12:07:33

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • tablesorter插件使用详解(附案例)

    这次给大家带来tablesorter插件使用详解(附案例),tablesorter插件使用的注意事项有哪些,下面就是实战案例,一起来看一下。 一、引入文件     登录后复制 效果如图:  二、标准的HTML表格,必须包括thead和tbo…

    2025年3月8日
    200
  • vue文件树组件使用(附代码)

    这次给大家带来vue文件树组件使用(附代码),使用vue文件树组件的注意事项有哪些,下面就是实战案例,一起来看一下。 本文主要是分析vue官方仓库里的文件树组件[vue github] demo可以查看 https://codepen.io…

    编程技术 2025年3月8日
    200
  • vue全局与局部组件使用步骤详解

    这次给大家带来vue全局与局部组件使用步骤详解,vue全局与局部组件使用的注意事项有哪些,下面就是实战案例,一起来看一下。 main.js入口文件的一些常用配置, 在入口文件上定义的public.vue为全局组件,在这里用的是pug模版 .…

    编程技术 2025年3月8日
    200
  • vue常用组件使用详解

    这次给大家带来vue常用组件使用详解,vue常用组件使用的注意事项有哪些,下面就是实战案例,一起来看一下。 项目技术: webpack + vue + element + axois (vue-resource) + less-loader…

    编程技术 2025年3月8日
    200
  • vue组件写法规范

    这次给大家带来vue组件写法规范,vue组件写法规范的注意事项有哪些,下面就是实战案例,一起来看一下。 数据驱动和组件化是vue.js两个最重要的特点。组件化是为了方便代码复用,提高开发效率。常见的vue组件写法有四种,各有特色,适用于不同…

    编程技术 2025年3月8日
    200
  • vue-cli组件配置与使用

    这次给大家带来vue-cli组件配置与使用,vue-cli组件配置与使用的注意事项有哪些,下面就是实战案例,一起来看一下。 概述: 一个文件就是一个模块,需要引入模块,和暴露模块的方法 在一个组件中使用另一个组件三部曲:引入组件、注册组件、…

    2025年3月8日 编程技术
    200
  • vue怎么写组件

    这次给大家带来vue怎么写组件,vue写组件的注意事项有哪些,下面就是实战案例,一起来看一下。 写一个vue组件 我下面写的是以.vue结尾的单文件组件的写法,是基于webpack构建的项目。如果还不知道怎么用webpack构建一个vue的…

    编程技术 2025年3月8日
    200
  • Vue做出内部组件轮播切换步骤详解

    这次给大家带来Vue做出内部组件轮播切换步骤详解,Vue做出内部组件轮播切换的注意事项有哪些,下面就是实战案例,一起来看一下。 对于那些不需要路由的内部组件,在切换的时候希望增加一个轮播过渡的效果,效果如下: 我们可以引入一个轮播组件,但是…

    2025年3月8日 编程技术
    400
  • express默认日志组件morgan使用详解

    这次给大家带来express默认日志组件morgan使用详解,使用express默认日志组件morgan的注意事项有哪些,下面就是实战案例,一起来看一下。 章节概览 morgan是express默认的日志中间件,也可以脱离express,作…

    编程技术 2025年3月8日
    200
  • vue todo-list组件上传npm

    这次给大家带来vue todo-list组件上传npm,vue todo-list组件上传npm的注意事项有哪些,下面就是实战案例,一起来看一下。 最近几个人合作完成了一个项目,发现有一些公用的基础业务组件,可以提取出来,不仅方便大家在各自…

    2025年3月8日 编程技术
    200

发表回复

登录后才能评论