6

「滑らかさ」テーマをjqueryデータテーブルに追加しようとしましたが、成功しませんでした。私のデータテーブルはスタイルされません。

ここに私のヘッダーコードがあります:

<style type="text/css" title="currentStyle">
    @import "/DataTables/media/css/smoothness/jquery-ui-1.8.21.custom.css"
</style>
<script type="text/javascript" language="javascript" src="DataTables/media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="DataTables/media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="DataTables/media/js/jquery-ui-1.8.21.custom.min.js"></script>
<script type="text/javascript" charset="utf-8">
    $(document).ready(function() {
        $('#join').dataTable( {
                "bJQueryUI": true,
                "sPaginationType": "full_numbers"
            } );
    } );    
</script>

本体のフォームは次のとおりです。

<table id="join" cellpadding="0" cellspacing="0" border="0" class="display" width="80%">
<thead>
    <tr>
        <th>Column 1</th>
        <th>Column 2</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Row 1 Data 1</td>
        <td>Row 1 Data 2</td>
    </tr>
    <tr>
        <td>Row 2 Data 1</td>
        <td>Row 2 Data 2</td>
    </tr>
</tbody>

ここで私は正確に何を間違っていますか??

助けてくれてありがとう。

4

2 に答える 2

7

jquery.dataTables_themeroller.cssテーマで動作するように、ファイルをインポートする必要があります。または、テーマを使用していない場合は、jquery.dataTables.css

また、このようにcssをインポートしてみてください

<link rel="stylesheet" href="DataTables/media/css/smoothness/jquery-ui-1.8.21.custom.css"/>
<link rel="stylesheet" href="DataTables/media/css/jquery.dataTables_themeroller.css"/>

または、インポートステートメントを保持したい場合-url一部がありませんでした

<style type="text/css" title="currentStyle">
   @import url("DataTables/media/css/smoothness/jquery-ui-1.8.21.custom.css");
   @import url("DataTables/media/css/jquery.dataTables_themeroller.css");
</style>

最終的にcssがインポートされなかったため、テーブルにはフォーマットが適用されていませんでした

于 2012-07-12T16:00:22.600 に答える
2

最近（3年後）でも、この質問はまだ現実的です. theme_roller私は提案されたように使用しませんでした。

ほとんどの場合、問題は次のとおりです。

  • 間違った注文スタイルまたは JavaScript ファイル、
  • 必要なファイルを読み込めませんでした。
  • 拡張機能のスタイルでテーマを競合または上書きする、
  • 拡張子が初期化されていません(例: dom: "Bfltip")。

jQueryUIテーマをDataTables（現在のバージョン1.10.8）で使用するには、次の順序でうまくいきました：

CSS

  1. dataTables.jqueryui.css
  2. smoothness/jquery-ui.css

JS

  1. jquery.js
  2. jquery-ui.js
  3. jquery.dataTables.js
  4. dataTables.jqueryui.js

$(document).ready(function() {
  var table = $('#dataContainer');
  table.DataTable({});
});
@import url("//cdn.datatables.net/1.10.8/css/dataTables.jqueryui.css");
@import url("//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css");
<html>

<head>
  <!-- link master.css -->
</head>

<body>
  <table id="dataContainer" class="display" cellspacing="0" width="100%">
    <thead>
      <tr><th>Position</th><th>Age</th><th>Start date</th></tr>
    </thead>

    <tr><td>batman</td><td>17</td><td>2015-12-26</td></tr>
    <tr><td>marko kraljevic</td><td>18</td><td>2015-12-26</td></tr>
    <tr><td>superman</td><td>1</td><td>2015-06-29</td></tr>
  </table>
  
  
  <script type="text/javascript" src="//code.jquery.com/jquery-2.1.4.js"></script>
  <script type="text/javascript" src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <script type="text/javascript" src="//cdn.datatables.net/1.10.8/js/jquery.dataTables.js"></script>
  <script type="text/javascript" src="//cdn.datatables.net/1.10.8/js/dataTables.jqueryui.js"></script>
  
</body>

</html>

拡張機能

手動 ( Download Builder ) では、最後に拡張機能 (例: ボタン/印刷、選択) スタイルを追加することをお勧めします。

CSS

  1. buttons.jqueryui.css

JS

  1. dataTables.buttons.js
  2. buttons.jqueryui.js
  3. buttons.print.js

ボタンは機能しますが (初期化を忘れないでください)、スタイルが崩れます。遊ぶのに欠けている部分は（dataTables ver < v1.11）です：

js

dom : '<"H"B<"dt-make-valign-center"lfr>>t<"F"ip>',
jQueryUI: true,

CSS

.dt-make-valign-center {
    margin: 5px;
}

ボタンを使用した作業コード:

$(document).ready(function() {
  var table = $('#dataContainer');
  table.DataTable({
    dom: '<"H"B<lfr>>t<"F"ip>',
    jQueryUI: true,
    buttons: [
      'print'
    ]
  });
});
@import url("//cdn.datatables.net/1.10.8/css/dataTables.jqueryui.css");
@import url("//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css");
@import url("//cdn.datatables.net/buttons/1.0.0/css/buttons.jqueryui.css");
<html>

<head>
  <!-- link master.css -->
</head>

<body>
  <table id="dataContainer" class="display" cellspacing="0" width="100%">
    <thead>
      <tr>
        <th>Position</th>
        <th>Age</th>
        <th>Start date</th>
      </tr>
    </thead>

    <tr>
      <td>batman</td>
      <td>17</td>
      <td>2015-12-26</td>
    </tr>
    <tr>
      <td>marko kraljevic</td>
      <td>18</td>
      <td>2015-12-26</td>
    </tr>
    <tr>
      <td>superman</td>
      <td>1</td>
      <td>2015-06-29</td>
    </tr>
  </table>


  <script type="text/javascript" src="//code.jquery.com/jquery-2.1.4.js"></script>
  <script type="text/javascript" src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <script type="text/javascript" src="//cdn.datatables.net/1.10.8/js/jquery.dataTables.js"></script>
  <script type="text/javascript" src="//cdn.datatables.net/1.10.8/js/dataTables.jqueryui.js"></script>
  <script type="text/javascript" src="//cdn.datatables.net/buttons/1.0.0/js/dataTables.buttons.js"></script>
  <script type="text/javascript" src="//cdn.datatables.net/buttons/1.0.0/js/buttons.jqueryui.js"></script>
  <script type="text/javascript" src="//cdn.datatables.net/buttons/1.0.0/js/buttons.print.js"></script>

</body>

</html>

于 2015-08-20T11:41:44.193 に答える