TableSorter

Question

我有一个 table分拣机 table，并且我在下面应用了排序和排序图标 CSS

.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 来应用 未排序的图像（左箭头而不是上下箭头）

我也试过 css .tablesorter-header，它会覆盖向上和向下箭头，并且始终存在。

这个有CSSclass吗？我应该处理这个初始化吗？

感谢阅读，

Tablesorter 初始化

$(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" ]
      }

    });

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

Answer 1

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

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

将 CSS 应用到所有未向上或向下排序的 headers

Answer 2

问题是您对原始 tablesorter (v2.0.5), and the filter widget you are using will only work with my fork of tablesorter（当前 v2.25.0）使用 css。

原始表格排序器使用 "tablesorter-headerSortUp"，这实际上是用于降序排序的名称（由于某种原因它是倒退的）。而 fork 使用 "tablesorter-headerAsc"，由 cssAsc option 设置。还有一个 cssDesc（设置为 "tablesorter-headerDesc"）选项。

总之，进入正题……

fork 有一个 built-in "tablesorter-noSort" class（由应用于 header 单元格的 cssNoSort option 设置。

如果您在 headerTemplate option, then you can set the cssIconNone option 中包含一个图标以定位该图标。

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

TableSorter - Apply Icon to unsorted Columns

html

javascript

css