Question

我正在尝试使用基于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的新手，不幸的是我无法摆脱它。

Answer 1

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

为什么不幸的是，如果你不介意说？

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

阿伦

Answer 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样式。

Answer 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”保持简单：'＆lt;“标题”fr＆gt; t＆lt;“footer”pi＆gt;'它将我的风格映射到“header”和“footer”css类。之后，您只需在您的网站css中定义“标题”和“页脚”。

Answer 4

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

有一个良好的编码。

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

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

4 个答案: