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

Question

我正在尝试使用基于 JQuery 构建的数据表向我的 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

I am new to JQuery and Datatables and unfortunately cannot move away from it.

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

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

艾伦