首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >TableSorter -将图标应用于未排序的列

TableSorter -将图标应用于未排序的列
EN

Stack Overflow用户
提问于 2015-12-18 16:28:39
回答 2查看 530关注 0票数 2

我有一个tablesorter表,并且在下面的CSS中应用了排序和排序图标

代码语言:javascript
运行
复制
.tablesorter-headerSortDown {
    background-image: url("../images/sort_down.png");
    background-size: 16px 16px;
}
.tablesorter-headerSortUp   {
    background-image: url("../images/sort_up.png");
    background-size: 16px 16px;
}

我尝试为.tablesorter-icon应用类似的CSS来应用未排序的图像(左箭头而不是上下箭头)

我还为.tablesorter-header尝试过css,它覆盖上下箭头,并且始终存在于任何时候。

这里有CSS类吗?我应该负责初始化吗?

谢谢你的阅读

Tablesorter init

代码语言:javascript
运行
复制
$(function() {
  $(".tablesorter")
    .tablesorter({
      widthFixed: false,
      sortList: [
            [0,0],
            [1,0]
        ],
        showProcessing: true,


      // this is the default setting
      cssChildRow: "tablesorter-childRow",

      // initialize zebra and filter widgets
      widgets: ["zebra", "filter", "stickyHeaders"],

      headers: { 0: { filter: true, sorter: true },
                 1: { filter: true, sorter: true },
                 2: { filter: false, sorter: true },
                 3: { filter: false, sorter: true },
                 4: { filter: false, sorter: false },
                 5: { filter: false, sorter: false },
                 6: { filter: false, sorter: false },
                 7: { filter: false, sorter: false },
                 8: { filter: false, sorter: false }},

      widgetOptions: {
        stickyHeaders_attachTo: '#connectionGrid',
        stickyHeaders_offset: 0,
        stickyHeaders_yScroll : '#tablesorter',
        stickyHeaders_addCaption: true,
        // include child row content while filtering, if true
        filter_childRows  : true,
        // class name applied to filter row and each input
        filter_cssFilter  : 'tablesorter-filter',
        filter_reset : '.clearall',
        // search from beginning
        filter_startsWith : false,
        // Set this option to false to make the searches case sensitive
        filter_ignoreCase : true,
        filter_functions : { 0 : true, 2 : true },
        sortInitialOrder: "desc",
        zebra : ["odd-row", "even-row" ]
      }

    });

编辑:这是现在的样子,我想为所有未排序的列添加一个箭头。

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2015-12-19 00:37:31

问题是,原始制表器 (v2.0.5)使用css,而您使用的筛选小部件只适用于我的餐盘叉 (当前为v2.25.0)。

原始的表操作程序使用"tablesorter-headerSortUp",它实际上是降序排序的名称(由于某种原因它是向后的)。而叉子使用的是由"tablesorter-headerAsc"设置的选项。还有一个cssDesc (设置为"tablesorter-headerDesc")选项。

不管怎样,说到重点..。

叉子有一个内置的"tablesorter-noSort"类(由应用于标头单元格的选项设置)。

如果在选项中包含了一个图标,那么可以将选项设置为目标图标。

票数 2
EN

Stack Overflow用户

发布于 2015-12-18 17:47:39

我相信我已经找到了一个解决方案,尽管使用HTML5可能不是最好的使用方法,但是,

.tablesorter-header:not(.tablesorter-headerSortUp):not(.tablesorter-headerSortDown)

将CSS应用于所有未被向上或向下排序的标头。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/34359952

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档