3

XSL 変換に基づいて XML 結果を表示するために使用しているテーブルをドレスアップするためにDataTablesを使用しています。技術的な意味 (ページング、並べ替え、フィルタリング) ですべてが機能していますが、ThemeRoller テーマを使用して、Web サイトにあるように見えるようにしようとしています。

これまでのところ、次のファイルを参照とともにプロジェクトに追加しました。

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

DataTables Web サイトに従って、次を使用して 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>
4

2 に答える 2

4

この例ではDataTableをベースにしており、この例のCSSを確認して、このファイルで問題が解決することを確認しました。

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;
}

コードを実行する

于 2011-01-03T18:46:19.993 に答える
0

問題がまだ解決されていない場合。jquery.ui.-1.xxjs を含めてみてください。それがないとjquery uiは動かないと思います。

于 2012-01-16T18:36:34.537 に答える