需要帮助使用 ThemeRoller答案

【问题标题】：Need help using ThemeRoller需要帮助使用 ThemeRoller
【发布时间】：2011-01-03 16:50:47
【问题描述】：

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

【问题讨论】：

@Music Magi：有什么办法可以张贴出问题的屏幕截图吗？
能把html表格代码放上来吗？
@Andrew imgur.com/BcNtZ
看起来像标题单元格周围的填充是导致它看起来那样的原因。我还会检查字体大小。快速测试—— .ui-widget-header { padding:0px; }
好的，但是您能否将生成的 HTML 放入浏览器中？谢谢。如果你使用 Chrome，你可以检查元素并获取 html。

标签： jquery html css datatables

【解决方案1】：

我在这个example 中建立了DataTable，检查了这个例子的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

【讨论】：

谢谢。我已经包含了这个文件，现在搜索框和分页按钮就在它们应该在的位置。但是，标题行仍然很大，看起来仍然不像他们页面上的示例。我觉得我仍然缺少一些东西
现在看起来一切正常，但并非所有组件的字体都相同。我认为这将是整个主题的一部分。我必须添加一些内容以确保我的表格获得这种字体吗？谢谢.. 看起来只有页眉和页脚没有使用字体.. 上面写着“显示 10 个条目”和“显示 41 个条目中的 1 到 10 个”
在第 5 行的文件 'datatables.net/release-datatables/media/css/demo_page.css' 中配置。在浏览器 IE7 +、Safari 和 Firefox 上，您可以使用工具来检查和分析应用了样式的每个元素。您可以在“datatables.net/examples/basic_init/themes.html”页面中执行此操作。
我需要这个加上以下内容：.dataTables_length { float: left; } .dataTables_filter { 浮动：对； } .fg-toolbar { 填充：5px;然后我将默认的输入 CSS 选择器从这里更改为：input, textarea 到这个：input:not(.dataTables_filter input), textarea

【解决方案2】：

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

【讨论】：

您可以从另一个答案旁边的绿色复选标记看到原始发布者认为他的问题已解决。