使用 Jquery DataTables 时的自定义表格样式答案

【问题标题】：Customized Table style when using Jquery DataTables使用 Jquery DataTables 时的自定义表格样式
【发布时间】：2011-04-01 04:54:36
【问题描述】：

我正在尝试使用基于 JQuery 构建的 Datatables 将分页添加到我的 html 表中。

<script type="text/javascript">
    $(document).ready(function() {
    $('#example').dataTable( {
        "bJQueryUI": true,
                    "sPaginationType": "full_numbers",
                    "sDom": '<"fg-toolbar ui-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix"lfr>t<"fg-toolbar ui-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix"ip>'
                } );
        } );
    </script>

<table id="example"
    style="border: silver solid 1px; width: 890px; margin-left: 0px; margin-bottom: 10px; font-size: 11px; padding-top: 10px;">
<tr class="thResultHeader">

排序是可选的，但如果没有排序也不是问题。

我的问题是当我使用"bJQueryUI": true 时，我的列标题出现蓝色标题，并且分页图标没有突出显示。当我使用"bJQueryUI": false 时，分页图标突出显示并且标题样式被覆盖。我需要的只是用我的表格样式进行分页，有或没有分页图标的排序和突出显示。我是 JQuery 和 Datatables 的新手，很遗憾无法摆脱它。

【问题讨论】：

标签： jquery pagination datatables

【解决方案1】：

我是 JQuery 和 Datatables 的新手，很遗憾无法摆脱它。

如果你不介意这么说，那为什么很遗憾？

我怀疑您遇到的问题可以通过包含用于 jQuery UI 主题的 DataTables 附带的演示 CSS 来解决。我的猜测是，您要么拥有用于非主题滚轮样式的 CSS (demo_table.css)，要么拥有未提供分页所需内容的自定义 CSS。您想要的 DataTables 分发中的文件是 media/css/demo_table_jui.css 。显然，没有什么可以阻止您完全自定义它，但它至少可以为您提供一个起点。

艾伦

【讨论】：

我相信你是这个插件的创造者，我已经在我的代码中集成了这个插件，不能回头改成其他一些功能，
我确实是:-)。您能否说一下您认为 DataTables 缺少哪些功能，以便我可以考虑将其用于未来的开发？以上对您的样式问题有帮助吗？
它的周末 :) 必须在星期一尝试，一定会告诉你它是否有帮助。
上述解决方案没有用。我的问题很简单。我正在尝试使用Datatables来获取分页功能。排序是可选的。我的css不应该被Datatables中的样式覆盖。应该完成了吗？
如果你不希望你的 css 被覆盖，为什么要使用 "bJQuery: true"？

【解决方案2】：

我不确定您所说的突出显示是什么意思，但是您可以通过实时事件将自己的 css 样式添加到分页元素中。

<style>
   .highlighted {color:#F00;}
</style>
<script type="text/javascript">
    $(document).ready(function() {
       $('#example').dataTable( { ... } );
       $('.dataTables_wrapper .fg-button').live('mouseenter mouseleave', 
         function() { $(this).toggleClass('highlighted'); });
    });
</script>

突出显示的样式必须在 jquery-ui 样式表链接之后声明，以便优先于 jquery-ui 样式。

【讨论】：

我也想修改 tr 和 th 的类。事实上这些是被覆盖的属性。这个解决方案不能解决我的问题。

【解决方案3】：

我听到了...我刚切换到 dataTables，我发现很难为我的表格放置正确的样式，因为这个插件上有很多选项和生成的 css 类。这是一件好事，但也很难学习。我只是使用 th 元素在我的网站上的任何表格中获取我的样式。

th {
background-color: #94AECE;
color: #003366;
padding-left: .1em;
padding-right: .1em;
border-left: 1px solid #dbddff;
border-right: 1px solid #dbddff;
border-bottom: 1px solid #dbddff;

}

您应该知道，“sDom”选项是您指定将哪些样式应用于您的表格的选项。我个人使用“sDom”保持简单：'t' 将我的样式映射到“header”和“footer”css 类。之后，您只需要在您的网站 css 中定义“header”和“footer”。

【讨论】：

我解决了这个问题，现在表格是我的风格，顺便说一句，我不使用 sDom。我不明白。我删除了顶部的搜索栏，因为它对我来说没有必要跨度>
对于，我制作了 2 个名为“.odd”和“.even”的 css 类。所以我的行有一个交替的颜色。

【解决方案4】：

在测试 Codigo Espagueti 的解决方案后，我确实注意到一个问题，当十六进制随机数的最后一个数字为零 (0) 时，生成的字符串将简单地有 5 个字符而不是 6 个字符。所以这是我的建议。

玩得开心。

'#' + (function () {
        while (true) {
          var rdm = (Math.random() * 0xFFFFFF << 0).toString(16);
          if (rdm.length == 6)
            return rdm;
        }
      })();

【讨论】：