我有一个 tablesorter 表,并且我在以下 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;
}
我尝试了类似的 CSS .tablesorter-icon
来应用未排序的图像(向左箭头而不是上下箭头)
我还尝试了 .tablesorter-header
的 css,它会覆盖向上和向下箭头,并且始终存在。
是否有一个 CSS 类可以做到这一点?我应该处理这个初始化吗?
感谢您的阅读,
表排序器初始化
$(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" ]
}
});
最佳答案
问题是您在原始 tablesorter 中使用了 css (v2.0.5),并且您使用的过滤器小部件仅适用于我的 fork of tablesorter (当前为 v2.25.0)。
原始的表排序器使用“tablesorter-headerSortUp”
,它实际上是用于降序排序的名称(由于某种原因它是向后排序的)。而 fork 使用 "tablesorter-headerAsc"
,由 cssAsc
option 设置。还有一个cssDesc
(设置为“tablesorter-headerDesc”
)选项。
不管怎样,先进入正题吧...
fork 有一个内置的“tablesorter-noSort”
类(由应用于标题单元格的 cssNoSort
option 设置。
如果您在 headerTemplate
option 中包含了一个图标,那么您可以设置cssIconNone
option以图标为目标。
关于javascript - TableSorter - 将图标应用于未排序的列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34359952/