2017-01-29 8 views
0

jQuery TableSorter 2.0が動作しているので、列ヘッダーをクリックするようになっています。しかし、上向き/下向きの矢印を表示することはできません。簡単にするために、https://mottie.github.io/tablesorter/docs/index.htmlのサンプルを使用してページを作成しました。ここでは、テストページのコードです:私は、ブラウザでページを開くとjQueryテーブルーダーに表示される矢印を上下に動かすことができません

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> 
    <title>Testing</title> 
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
    <script type="text/javascript" src="bootstrap/js/jquery.min.js"></script> 
    <script type="text/javascript" src="tablesorter/js/jquery.tablesorter.js"></script> 
    <!-- <script type="text/javascript" src="tablesorter/js/jquery.tablesorter.widgets.js"></script> --> 
    <!-- <link href="tablesorter/css/theme.bootstrap.css" rel="stylesheet" type="text/css" /> --> 


<script type="text/javascript"> 
$(document).ready(function() 
      { 
       $("#myTable").tablesorter(); 
      } 
     ); 
</script>  
</head> 
<body> 
<table id="myTable" class="tablesorter"> 
<thead> 
<tr> 
    <th>Last Name</th> 
    <th>First Name</th> 
    <th>Email</th> 
    <th>Due</th> 
    <th>Web Site</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
    <td>Smith</td> 
    <td>John</td> 
    <td>[email protected]</td> 
    <td>$50.00</td> 
    <td>http://www.jsmith.com</td> 
</tr> 
<tr> 
    <td>Bach</td> 
    <td>Frank</td> 
    <td>[email protected]</td> 
    <td>$50.00</td> 
    <td>http://www.frank.com</td> 
</tr> 
<tr> 
    <td>Doe</td> 
    <td>Jason</td> 
    <td>[email protected]</td> 
    <td>$100.00</td> 
    <td>http://www.jdoe.com</td> 
</tr> 
<tr> 
    <td>Conway</td> 
    <td>Tim</td> 
    <td>[email protected]</td> 
    <td>$50.00</td> 
    <td>http://www.timconway.com</td> 
</tr> 
</tbody> 
</table> 
</body> 
</html> 

は、列の並べ替えとして期待される、(私はFirefoxとエッジを試してみた)が、何のアップ/ダウンの矢印はありません。

私はこの問題について他の投稿を見てきましたが、解決策は自分の状況に合っていないか、役に立たないです。

私は、明示的なCSSリンクを使用して、またはCSSリンクを使用せずに、これを試しました。また、CSSフォルダーに表示されるいくつかの異なるテーマを使用しています。

+0

は、CSSへのパス有効ですか?なぜコメントアウトされていますか? – charlietfl

+1

デフォルトテーマのCSSへのパスが有効な場合、コードは正常に動作します。http://plnkr.co/edit/L36bTYnTloJ6UDsc5O5B?p=preview – charlietfl

+0

はい、ありがとうございます。それは動作します。 –

答えて

2

up/down矢印は、cssファイル(テーマファイル)を使用して生成されます。

あなたはbootstrapのCSSファイルの両方を使用する必要があります

<link rel="stylesheet" href="/path/to/bootstrap-v3.min.css" /> 

そしてtheme.cssファイル:

<link rel="stylesheet" href="/path/to/theme.default.css" /> 
+0

noteテーマオプションとして設定されていない限り、ブートストラップに依存しません。 – charlietfl

+0

@charlietfl bootstrapは 'th/tr'スタイルも設定していますので、すべてがうまく動作することを確認するために使用する方が良いでしょう。必須ではありません:) – Dekel

+1

はdefinitlyそれを使用することができますが、必須ではありません...上のデモを参照してください。 defaultもこれらのスタイルを設定します – charlietfl

関連する問題