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主題未在標頭中顯示未排序的圖標

回答

相關問題