Question

我正在实现jQuery的tablesorter，但箭头似乎无法显示。

这是我到目前为止所做的：

<script type="text/javascript" src="/path/to/jquery-latest.js"></script> 
<script type="text/javascript" src="/path/to/jquery.tablesorter.js"></script>

和

$(document).ready(function() 
    { 
        $("#myTable").tablesorter(); 
    } 
);

表格排序很好，但箭头没有显示。我在这里遗漏了什么吗？我甚至添加了以下但没有工作：

<LINK rel="StyleSheet" type="text/css" href="../tablesorter/themes/green/style.css">

Answer 1

在此页面上使用tablesorter时遇到了同样的问题 - http://ajthomas.co.uk/fpl/。但是，这是因为我错过了添加download中出现的样式表和图片。看起来你也是这样。

Answer 2

如果您级联样式表，它将看起来与TableSorter站点上的样式完全相同。你甚至不需要从包中移动它。只需在样式表声明后添加此行：

<link href="[YOUR PATH TO]/tablesorter/themes/blue/style.css" rel="stylesheet" type="text/css" />

Answer 3

我在最新版本中遇到了这个问题。（由于它很老，可能与原始问题无关）

我已包含主题的样式（蓝色），并且样式中的箭头Base 64图像已编码，因此应该可以使用。

一个简单的问题是我除了tablesorter之外没有tablesorter-blue类，因此它正在加载默认主题。

Answer 4

为了使箭头显示出来，我必须做几件事。

首先是添加css。我将tablesorter-blue.css和其他样式一起移到了目录中，然后使用以下标记将其导入。

<link rel="stylesheet" href="/styles/tablesorter-blue.css">

其他答案遗漏的部分是在定义表格时指定样式。

<script>$(function() {$('#table_to_sort').tablesorter({"theme": "blue"});});</script>

浏览tablesorter-*。css文件时，您会看到样式是用tablesorter-blue或tablesorter-green之类的名称定义的。通过指定主题，它将主题名称附加到“ tablesorter-”，以便您可以包括所有主题，并将不同的主题应用于不同的表。

在最新版本中，实际图像以Base64形式在CSS中提供，因此不再需要将图像文件复制到项目中。

Answer 5

如果有人仍然遇到没有显示排序箭头的tablesorter问题，这里是我在初始化回调中使用的一个小技巧：

$("table.sort").tablesorter({
  theme : 'dropbox',
  cssIcon: 'tablesorter-icon',
  initialized : function(table){
    $(table).find('thead .tablesorter-header-inner').append('<i class="tablesorter-icon"></i>');
  }
});

Answer 6

您需要在表

中添加 tablesorter 类

JQuery TableSorter：排序箭头没有显示

6 个答案: