未应用Jquery Datatables插件CSS默认值。分页和搜索显示在表格的左侧。并且没有样式

Question

我有一个以前使用displaytag的表格。我决定将分页移到浏览器上，这样就可以更快了。为此，我使用了datatables jquery插件。但是分页，搜索等等都是乱七八糟的。我试着解决这个问题已经有一天了，现在我没有多少时间了。请告诉我是什么引起的。下面是数据表和显示标记以及结果的一些图像。

数据表：

$(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的文件夹中，我弄错了。正确的做法为我解决了问题。