未应用 Jquery Datatables 插件 CSS 默认值。分页和搜索出现在表格的左侧。没有风格

Question

我有一个以前使用 displaytags 的表格。我决定将分页移动到浏览器，这样它就可以更快了。我为此使用了数据表 jquery 插件。但是分页、搜索等都是 F***** 了。我从一天开始就试图解决它，现在我没有多少时间了。请告诉我是什么原因造成的。下面是数据表和显示标签以及结果的一些图像。

数据表:

$(document).ready(function() {
    $('#cmpReport').DataTable({
        "bAutoWidth" : false,
        "aoColumns" : [ {
            sWidth : '1%'
        }, {
            sWidth : '8%'
        }, {
            sWidth : '8%'
        }, {
            sWidth : '5%'
        }, {
            sWidth : '3%'
        }, {
            sWidth : '11%'
        }, {
            sWidth : '3%'
        }, {
            sWidth : '7%'
        }, {
            sWidth : '7%'
        }, {
            sWidth : '5%'
        }, {
            sWidth : '5%'
        }, {
            sWidth : '5%'
        }, {
            sWidth : '7%'
        }, {
            sWidth : '5%'
        }, {
            sWidth : '5%'
        }, {
            sWidth : '5%'
        }, {
            sWidth : '5%'
        }, {
            sWidth : '5%'
        } ]
    });
});

显示标签:

<display:table htmlId="cmpReport" id="cmpReport" name="cmpReport" sort="external" partialList="true" size="bigSize" pagesize="${bSize}" style="table-layout: fixed; width: 100%; white-space: normal !important;" class="thinBorder stripe row-border    compact cell-border td.dt-center"
            requestURI="/CmpReportAction.do" export="false">
            <display:setProperty name="paging.banner.placement" value="none" />
            <%-- <display:setProperty name="paging.banner.group_size" value="5" /> --%>
            <display:setProperty name="css.tr.even" value="dataWh" />
            <display:setProperty name="css.tr.odd" value="coldata" />
            <%-- <display:setProperty name="export.pdf" value="true" />
            <display:setProperty name="export.csv.filename" value="cmpReport.csv" />
            <display:setProperty name="export.excel.filename" value="cmpReport.xls" />
            <display:setProperty name="export.pdf.filename" value="cmpReport.pdf" />
            <display:setProperty name="export.xml.filename" value="cmpReport.xml" />
            <display:setProperty name="export.csv.include_header" value="true" />
            <display:setProperty name="export.excel.include_header" value="true" />
            <display:setProperty name="export.pdf.include_header" value="true" /> --%>
            <display:column headerClass="tableHead" title=" " style="text-align:center" media="html">
                <img class="expand" alt="" src="images/plus.jpg" onclick="toggleHawbInfo(this.parentNode.parentNode)" />
            </display:column>
            <display:column headerClass="repsub" title="MBL" property="mblno" style="word-wrap: break-word; text-align: center;" sortable="false" class="ajaxMLB" />
            <display:column headerClass="repsub" title="HAWB" property="hblno" style="word-wrap: break-word; text-align: center;" sortable="false" class="ajaxHawb" />
            <display:column headerClass="repsub" title="Compliance" property="compliance" style="word-wrap: break-word; text-align: center;" sortable="false" />
            <display:column headerClass="repsub" title="Total<br> Scanned<br> Docs" property="totalScanned" style="word-wrap: break-word; text-align: center;" sortable="false" class="ajaxTSD" maxLength="10" />
            <display:column headerClass="repsub" title="STT" property="stt" style="word-wrap: break-word; text-align: center;" sortable="false" class="ajaxSTT" />
            <display:column headerClass="repsub" title="Product" property="product" style="word-wrap: break-word; text-align: center;" sortable="false" class="ajaxProd" />
            <display:column headerClass="repsub" title="Ship#" property="archive_Num" style="word-wrap: break-word; text-align: center;" sortable="false" class="ajaxShip" />
            <display:column headerClass="repsub" title="Ship date" property="shpmt_create_date" style="word-wrap: break-word; text-align: center;" sortable="false" maxLength="10" class="ajaxShipDt" />
            <display:column headerClass="repsub" title="Ship NAD" property="shpr_id" style="word-wrap: break-word; text-align: center;" sortable="false" class="ajaxShipNad" />
            <display:column headerClass="repsub" title="Ship Name" property="shipper" style="word-wrap: break-word; text-align: center;" sortable="false" maxLength="10" class="ajaxShipName" />
            <display:column headerClass="repsub" title="Cons NAD" property="csgn_id" style="word-wrap: break-word; text-align: center;" sortable="false" class="ajaxConsNad" />
            <display:column headerClass="repsub" title="Cons Name" property="consignee" style="word-wrap: break-word; text-align: center;" sortable="false" class="ajaxCons" />
            <display:column headerClass="repsub" title="Pay Term" property="service_type" style="word-wrap: break-word; text-align: center;" sortable="false" class="ajaxPay" />
            <display:column headerClass="repsub" title="Inco Term" property="inco_terms" style="word-wrap: break-word; text-align: center;" sortable="false" class="ajaxInco" />
            <display:column headerClass="repsub" title="Dep" property="org" style="word-wrap: break-word; text-align: center;" sortable="false" class="ajaxDep" />
            <display:column headerClass="repsub" title="Destination" property="des" style="word-wrap: break-word; text-align: center;" sortable="false" class="ajaxDest" />
            <display:column headerClass="repsub" title="Service Level" property="serv_lvl_code" style="word-wrap: break-word; text-align: center;" sortable="false" class="ajaxSL" maxLength="10" />
        </display:table>

现在是最终结果的图片。

编辑:包含搜索和分页按钮的 div 具有以下属性。

<div class="dataTables_paginate paging_simple_numbers" id="cmpReport_paginate">

上一页12345…93下一页

<div id="cmpReport_filter" class="dataTables_filter">

搜索:

Answer 1

好吧.. 伙计们.. 我犯了一个错误.. 与数据表一起出现的数据表 css 在一个名为 datatables/css 的文件夹中，我错了。正确解决了我的问题。