ThemeRollerを使用すると助けが必要です

私はXSL変換に基づいてXML結果を表示するために使用しているテーブルをドレスアップするのにDataTables を使用しています。私は技術的な意味（ページング、並べ替え、フィルタリング）からすべての作業をしていますが、私はThemeRollerのテーマをWebサイトのように見せることを試みています。ThemeRollerを使用すると助けが必要です

これまでのところ、私はその参照して、私のプロジェクトに次のファイルを追加しました：

<link type="text/css" href="css/custom-theme/jquery-ui-1.8.7.custom.css" rel="stylesheet"/>

をしてDataTableのウェブサイトごとに、次を使用してThemeRollerのテーマを有効に：

$(document).ready(function() { 
    $('#mainTable').dataTable({ 
     "bJQueryUI": true, 
     "sPaginationType": "two_button" 
    }); 
});

表が取得スタイリングされていますが、ヘッダー行が広すぎるため、1行に複数の行が表示されているように見えません。私が間違っていることを示す何か？非常に前もってありがとう。

HTMLコード：

<html> 
    <body> 
    <head runat="server"> 
     <META http-equiv="Content-Type" content="text/html; charset=utf-8"> 
     <link type="text/css" href="css/custom-theme/jquery-ui-1.8.7.custom.css" rel="stylesheet"> 
     <script src="Scripts/jquery-1.4.4.min.js" type="text/javascript"> 
     </script> 
     <script src="Scripts/jquery.dataTables.min.js" type="text/javascript"> 
     </script> 
     <script type="text/javascript"> 
         $(document).ready(function() { 
          $('#example').dataTable({ 
           "bJQueryUI": true 
          }); 
         }); 
        </script> 
    </head> 
    <table cellpadding="0" cellspacing="0" border="0" id="example" class="display"> 
     <thead> 
     <tr> 
      <th> 
      <h3>Title</h3> 
      </th> 
      <th> 
      <h3>URL</h3> 
      </th> 
      <th> 
      <h3>Notes</h3> 
      </th> 
      <th> 
      <h3> 
      </h3> 
      </th> 
     </tr> 
     </thead> 
     <tbody> 
     <tr> 
      <td> 
      <a href="http://www.roperband.com">Jesse\'s Article</a> 
      </td> 
      <td> 
      <a href="http://www.roperband.com">http://www.roperband.com</a> 
      </td> 
      <td>Some of Jesse\'s notes</td> 
      <td> 
      </td> 
     </tr> 
     </tbody> 
    </table> 
    </body> 
</html></span> 

    </div> 
    <div class="clear"> 
    </div> 
    <div class="footer"> 
    </div> 
    </form> 
</body> 
</html>

出典

2011-01-03 Jesse Roper

@Music Magi：何が起こっているのかのスクリーンショットを投稿できますか？ –

htmlテーブルコードを置くことができますか？ –

@Andrew http://imgur.com/BcNtZ –

は、私がこのexampleでのDataTableを基づか、この例のためにあなたが持っているCSSをチェックし、fileが問題を解決し、これを見た：

CSS：

table.display thead th div.DataTables_sort_wrapper { 
    position: relative; 
    padding-right: 20px; 
    padding-right: 20px; 
} 

table.display thead th div.DataTables_sort_wrapper span { 
    position: absolute; 
    top: 50%; 
    margin-top: -8px; 
    right: 0; 
}

run code

出典

2011-01-03 18:46:19

ありがとうございます。私はこのファイルを含めて、検索ボックスと改ページボタンはどこにあるのでしょうか。しかし、ヘッダー行はまだまだ巨大で、ページ上の例はまったく見えません。私はまだ何かが欠けているように感じます。 –

すべてがうまくいっているようですが、フォントはすべてのコンポーネントで同じではありません。私はこれがテーマ全体の一部になると思うでしょう。私のテーブルがこのフォントを取得するために追加しなければならないものがありますか？ありがとうございました。それは、それはフォントを取っていないヘッダーとフッターのように見えます。 'Show 10 entries'と '41 entriesの1から10までを表示' –

'http：///www.datatables.net/release-datatables/media/css/demo_page.css 'の5行目を参照してください。ブラウザIE7 +、Safari、Firefoxでは、スタイルが適用されている各要素を検査して分析するツールがあります。「http://www.datatables.net/examples/basic_init/themes.html」ページでこれを行うことができます。 –

問題が解決しない場合はまだ解決されていません。 jquery.ui.-1.x.x.jsを含めてみてください。私はjquery UIがそれなしで動作しないと思う。

出典

2012-01-16 18:36:34

あなたが他の横に緑のチェックマークから見ることができますが元のポスターが自分の問題を解決したと答えます。 –

ThemeRollerを使用すると助けが必要です

答えて

関連する問題