Jquery 数据表看起来很奇怪答案

【问题标题】：Jquery datatables look weirdJquery 数据表看起来很奇怪
【发布时间】：2011-10-30 21:41:24
【问题描述】：

有人知道我的数据表看起来很奇怪吗？我知道这应该是微不足道的，但我就是想不通，它整天困扰着我。样本数据是在http://datatables.net/ 上找到的数据（无耻地 1:1 复制，所以这应该不是问题）。我没有意外覆盖任何默认的 CSS 规则，也没有编辑默认的 jquery 主题动画。

这就是我初始化数据表的方式：

$('#datatable').dataTable({ 
    "bJQueryUI": true,
    "sPaginationType": "full_numbers",
    "bSaveState": true,
    "aoColumnDefs": [
        {'sWidth':'40px', 'aTargets':[0]},
        {'sWidth':'350px', 'aTargets':[1]},
        {'sWidth':'350px', 'aTargets':[2]}
    ]});

这就是我的<header> 的样子：

<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.dataTables.min.js"></script>
<link type="text/css" rel="stylesheet" href="css/flick/jquery-ui-1.8.16.custom.css" />
<link type="text/css" rel="stylesheet" href="css/css3.css" />

数据表外观截图：

【问题讨论】：

aaaa，我忘了我需要 <link type="text/css" rel="stylesheet" href="css/demo_table_jui.css" /> 行才能让它工作......但排序箭头仍然奇怪地定位：/
单元格边框可以用<table .. cellpadding="0" border="0" cellspacing="0"> 固定，这样可以使线条水平。谢谢，您的 ` 解决方案也适用于我。

标签： jquery jquery-ui datatables

【解决方案1】：

好的，所以我想通了，以供将来参考，您需要<table> 标记中的class='display' 位，如果没有它，默认外观将不起作用。

以后你还需要

<link type="text/css" rel="stylesheet" href="css/demo_table_jui.css" />

【讨论】：

这也解决了我的排序箭头在换行符上的问题。

【解决方案2】：

看起来您将第一列设置为 40 像素宽：

{'sWidth':'40px', 'aTargets':[0]},

但是渲染引擎比 40 像素宽一点，这会迫使你的标题行换行不止一行，并且会发生丑陋。

底部奇怪的分页链接看起来像是您在复制时错过了一些 CSS。

【讨论】：