3

我正在使用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 代码：

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