Tablesorter Bootstrap主题未在标头中显示未排序的图标

未排序的图标未显示出来。其他主题也不起作用。我不确定我错过了什么。我在下面提供了我的代码。Tablesorter Bootstrap主题未在标头中显示未排序的图标

图标只显示我设置为在sortList中排序的列。

我不清楚何时需要为小部件添加主题（例如，小部件：['uitheme'}）以及何时使用主题（例如，主题：“bootstrap”）。

是否需要包含我拥有的所有css文件？

headerTemplate更需要，尤其是bootstrap？

<head> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script> 
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css"> 
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap-theme.min.css"> 
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.js"></script> 
<script type='text/javascript' src="//cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.26.5/js/jquery.tablesorter.js"></script> 
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.26.5/js/jquery.tablesorter.widgets.js"></script> 
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.26.5/js/parsers/parser-input-select.js"></script> 
</head> 


<script> 

$(function() { 

// call the tablesorter plugin 
$("table").tablesorter({ 
theme: "bootstrap", 
// sort on the first column and in ascending order PRIOR TO the sort on the  selected column 
// sort [column,asc=1 or desc=0] 
sortList: [[1,0]], 
// hidden filter input/selects will resize the columns, so try to minimize the change 
widthFixed : false, 

headerTemplate: '{content} {icon}', 
// initialize zebra striping and filter widgets 
widgets: ['uitheme','zebra', 'filter','output'], 

//headers: { 
//0: {sorter: 'checkbox', filter:true}, 
//1: {sorter: 'inputs',filter:true} 
//}, 

widgetOptions : { 

// css class applied to the table row containing the filters & the inputs within that row 
filter_cssFilter : 'tablesorter-filter', 

// filter widget: If there are child rows in the table (rows with class name from "cssChildRow" option) 
// and this option is true and a match is found anywhere in the child row, then it will make that row 
// visible; default is false 
filter_childRows : false, 

// Set this option to true to use the filter to find text from the start of the column 
// So typing in "a" will find "albert" but not "frank", both have a's; default is false 
filter_startsWith : false, 
// Delay in milliseconds before the filter widget starts searching; This option prevents searching for 
// every character while typing and should make searching large tables faster. 
filter_searchDelay : 100, 

// if true, search column content while the user types (with a delay) 
filter_liveSearch : true 

} 
}); 
});

来源

2016-07-07 Robin

的theme.bootstrap.css file似乎缺少。它包含未排序的箭头定义。

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.26.5/css/theme.bootstrap.min.css" >

来源

2016-07-08 00:16:50 Mottie

谢谢！我已经添加并评论了很多不同的css文件，所以我将它留下了评论。当我取消评论时，它非常完美。 – Robin

我不清楚如果我想要使用另一个主题，如果我需要添加一个不同的CSS，主题：x和小部件：'uitheme'。我不了解所有这些都是他们所需要的。 – Robin

'uitheme'小部件最初是为了在列排序时更改应用于标题和排序图标的类名而创建的。它需要jQuery UI，然后是Bootstrap。它不像以前那样重要，因为大部分类名现在都是选项的一部分，但它确实可以更轻松地在主题之间切换。因此，只能使用'uitheme'小部件用于jQuery UI和Bootstrap。没有它，一切都可以正常工作。 – Mottie

Tablesorter Bootstrap主题未在标头中显示未排序的图标

回答

相关问题