gpt4 book ai didi

jquery - 需要帮助使用 ThemeRoller

转载 作者:可可西里 更新时间:2023-11-01 12:53:31 26 4
gpt4 key购买 nike

我正在使用 DataTables装饰我用来显示基于 XSL 转换的 XML 结果的表格。我从技术 Angular (分页、排序、过滤)进行所有工作,但我想弄清楚如何使用 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>

最佳答案

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

关于jquery - 需要帮助使用 ThemeRoller,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4586388/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com