table 点击排序 三种方法

所属分类:UI-筛选及排序

 42243  365  查看评论 (19)
分享到微信朋友圈
X
table 点击排序 三种方法 ie兼容6

使用方法

简单易懂,页面只需引入封装好的tablesort.js,然后进行初始化就可以了,并且封装的tablesort.js都有相应的注释,如果需求变化可以自己进行修改和维护。

有点抱歉的就是这里的样式没有调整好,没时间整理,还望各位老铁们儿轻点下手。

window.onload = function()
{
    new TableSorter("tb1");//first ways
    new TableSorter("tb2", 0, 2 , 5, 6); //second ways (注释:这里意思是可以设置那一列进行筛选排序操作)
    new TableSorter("tb3").OnSorted = function(c, t) //three ways
    {
        alert("table is sorted by " + c.innerHTML + " " + (t ? "Asc" : "Desc"));
    }
}
相关插件-筛选及排序

table 点击排序 三种方法

不用通过数据交互那么复杂,可以简单的静态排序和筛选,适用于后台数据列表等需求
  筛选及排序
 42244  365

jquery仿app产品筛选列表

jquery仿app产品筛选列表
  筛选及排序
 55810  398

仿当当移动端筛选

仿当当网移动端条件筛选
  筛选及排序
 40363  370

jQuery根据条件筛选数据

jQuery根据输入关键字和选择的条件进行筛选,常用代码简单实用。
  筛选及排序
 28862  332

讨论这个项目(19)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    外星人 0
    2023/7/5 11:15:46
    Mr.small7??? ???? 0
    2020/7/29 9:53:03
    <style type="text/css">
        div{border-radius: 5px;}
           .SortDescCss {
               background-image: url(../static/images/Desc.gif);
               background-repeat: no-repeat;
               background-position: right center;
           }
           .SortAscCss {
               background-image: url(../static/images/Asc.gif);
               background-repeat: no-repeat;
               background-position: right center;
           }
    </style>

    用在我的表单gif显示不出来,你的可以,是什么原因呢?

        西瓜0
        2020/7/29 10:32:23
        图片大小,路径,一般图片和原图大小不一至会超出显示范围,应该是这个问题。
        mo_linger0
        2020/7/29 11:17:14
        奈斯,就是这个问题,楼主可以调整下位置哦
    回复
    你的名字 0
    2020/3/7 11:00:11
    支持分页吗,如果我只想对当前页进行排序可以实现吗?
        mo_linger0
        2020/3/7 11:04:59
        分页跟方法不冲突,分页需要你自己?饬一下噢
        mo_linger0
        2020/3/7 11:05:19
        或者你可以用jq的插件
    回复
    微笑、请继续 0
    2019/12/9 11:10:08
    我设置了两个按钮,点击正序 点击倒叙, 怎么调单独的方法
    回复
    青涩 0
    2019/6/26 15:28:06
    怎么固定某一列,不让排序
        mo_linger1
        2019/6/26 16:22:25
        我们冷静来看下你的这个想法,如果行数据你都排序了,你的列不跟着排序,是不是会造成数据对不上呢,最好的办法就是建议你先去看下excel的排序和筛选喔
        关超笛0
        2020/9/23 9:57:43
        我想让序号不排序啊
    回复
    ChenYiGeEr 0
    2019/6/15 17:34:31
    Mango6523550304 0
    2018/12/3 12:08:30
    能排列表头是合并单元格的这种 表吗
        mo_linger0
        2018/12/5 10:36:09
        可以,但是你要稍微改下逻辑
    回复
    ㄚòひdē独苩 0
    2018/10/10 12:31:41
    IE 360 不兼容
        mo_linger1
        2018/10/10 14:44:26
        ie你要允许访问才能使用,360下载测试了可以的,360极速浏览器也是没有问题的,能说的具体点嘛
    回复
    Kazno Nas 0
    2018/2/13 15:55:10
    不是有datatable吗
        mo_linger1
        2018/2/13 16:02:21
        是有的,但是假如公司不允许,或者业务觉得你用datatable过于笨重,而自己的业务简单只需要前端一个小筛选呢?技术没有对错哈,谢谢你认真的思考过!
        ChenYiGeEr0
        2019/6/15 17:32:53
        可以用的啊 感觉很好用啊
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复