Question

我正在使用DataTables 打扮一个表，我用它来显示基于XSL转换的XML结果。我有一切从技术意义（分页，排序，过滤）工作，但我想弄清楚使用ThemeRoller主题使它看起来像他们在他们的网站上。

到目前为止，我已将以下文件添加到我的项目中，其中包含以下参考：

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

并根据DataTables网站使用以下内容启用ThemeRoller主题：

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

该表被设置样式，但是看起来不正确，标题行太宽而且多行上的东西应该在一行上。有什么迹象表明我做错了什么？非常感谢提前。

HTML code：

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

Answer 1

我将DataTable基于此example，检查此示例中的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

Answer 2

如果您的问题尚未解决。请尝试包括jquery.ui.-1.x.x.js。我认为jquery ui没有它就行不通。

需要帮助使用ThemeRoller

2 个答案: