2
Die unsortierten Symbole werden nicht angezeigt. Andere Themen funktionieren auch nicht. Ich bin mir nicht sicher, was ich vermisse. Ich habe meinen Code unten zur Verfügung gestellt.Tablesorter Bootstrap-Thema zeigt kein unsortiertes Symbol in der Kopfzeile
Die Symbole werden nur für die Spalten angezeigt, die ich in sortList sortiert habe.
Ich bin unklar, wenn ich Widgets ein Theme hinzufügen muss (z. B. Widgets: ['Uitheme']) und wann Theme (z. B. Thema: "Bootstrap") verwenden.
Muss ich alle css-Dateien, die ich habe, einbeziehen?
Wird in HeaderTemplate mehr benötigt, insbesondere für 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
}
});
});
Vielen Dank! Ich hatte so viele verschiedene CSS-Dateien hinzugefügt und kommentiert, dass ich sie auskommentiert hatte. Es funktionierte perfekt, als ich es auskommentierte. – Robin
Ich bin unklar, wenn ich ein anderes Thema verwenden möchte, wenn ich ein anderes CSS hinzufügen muss, Thema: X, und Widgets: 'Uitheme'. Ich verstehe nicht alles, was von einem anderen verlangt wird. – Robin
Das Widget 'uitheme' wurde ursprünglich erstellt, um die Klassennamen zu ändern, die auf die Kopfzeilen angewendet werden und die Symbole sortieren, wenn eine Spalte sortiert wurde. Es wurde für jQuery UI, dann Bootstrap benötigt. Es ist nicht so wichtig wie es einmal war, weil die meisten Klassennamen jetzt Teil der Optionen sind, aber es macht es einfacher, zwischen Themen zu wechseln. Verwenden Sie das Widget "uitheme" nur für jQuery UI & Bootstrap. Alles andere funktioniert ohne es gut. – Mottie