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>

扩展

手册（下载生成器）建议在末尾添加扩展（例如按钮/打印、选择）样式。

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 回答