我有一个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;
}
我尝试为.tablesorter-icon
应用类似的CSS来应用未排序的图像(左箭头而不是上下箭头)
我还为.tablesorter-header
尝试过css,它覆盖上下箭头,并且始终存在于任何时候。
这里有CSS类吗?我应该负责初始化吗?
谢谢你的阅读
Tablesorter init
$(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" ]
}
});
编辑:这是现在的样子,我想为所有未排序的列添加一个箭头。
发布于 2015-12-19 00:37:31
问题是,原始制表器 (v2.0.5)使用css,而您使用的筛选小部件只适用于我的餐盘叉 (当前为v2.25.0)。
原始的表操作程序使用"tablesorter-headerSortUp"
,它实际上是降序排序的名称(由于某种原因它是向后的)。而叉子使用的是由"tablesorter-headerAsc"
设置的选项。还有一个cssDesc
(设置为"tablesorter-headerDesc"
)选项。
不管怎样,说到重点..。
叉子有一个内置的"tablesorter-noSort"
类(由应用于标头单元格的选项设置)。
如果在选项中包含了一个图标,那么可以将选项设置为目标图标。
发布于 2015-12-18 17:47:39
我相信我已经找到了一个解决方案,尽管使用HTML5可能不是最好的使用方法,但是,
.tablesorter-header:not(.tablesorter-headerSortUp):not(.tablesorter-headerSortDown)
将CSS应用于所有未被向上或向下排序的标头。
https://stackoverflow.com/questions/34359952
复制相似问题