Question

我在我的应用程序中使用'Datatable Jquery插件'和服务器端处理。现在我想在数据表中使用水平和垂直滚动条。

为了实现这一点，我在数据表代码中使用了'sScrollX'，'sScrollXInner'和'sScrollY'（如下所述）：

"sScrollX": "100%",
"sScrollXInner": "110%",
"sScrollY": 200,

在此之后，当我执行我的应用程序时，数据没有进入数据表，并且在浏览器中出现错误，例如“对象不支持此属性或方法”，并且它在'jquery.dataTables.js'中指示错误文件。

这里我分享了数据表截图的网址和错误：

URL（链接）下方显示数据表，其中没有数据，滚动条也没有以正确的方式显示。

Problematic dataTable screenshot

URL（链接）下面显示了数据表初始化时出现的错误。

error occurred (screenshot)

以下是我们在应用程序中使用的JavaScript和HTML代码：

JavaScript代码：

    <script type="text/javascript">
$(document).ready(function () {
    TableTools.BUTTONS.download = {
        "sAction": "text",
        "sTag": "default",
        "sFieldBoundary": "",
        "sFieldSeperator": "\t",
        "sNewLine": "<br>",
        "sToolTip": "Download Excel",
        "sButtonClass": "DTTT_button_xls", //eariler was "DTTT_button_text"
        "sButtonClassHover": "DTTT_button_xls_hover", //earlier was "DTTT_button_text_hover"
        "sButtonText": "Download",
        "mColumns": "all",
        "bHeader": true,
        "bFooter": true,
        "sDiv": "",
        "fnMouseover": null,
        "fnMouseout": null,
        "fnClick": function (nButton, oConfig) {
            var oParams = this.s.dt.oApi._fnAjaxParameters(this.s.dt);
            var iframe = document.createElement('iframe');
            iframe.style.height = "0px";
            iframe.style.width = "0px";
            iframe.src = oConfig.sUrl + "?" + $.param(oParams);
            document.body.appendChild(iframe);
        },
        "fnSelect": null,
        "fnComplete": null,
        "fnInit": null
    };
    $('#id_submit').click(function () {
        $("#prepack").dataTable({
            "bDestroy": true,
            "bRetrieve": false,
            "bJQueryUI": true,
            "bServerSide": true,
            "bAutoWidth": true,
            "sAjaxSource": "/demo_trial_application/DatasourceGsonServlet",
            "bProcessing": true,
            "sPaginationType": "full_numbers",
            "sScrollX": "100%",
            "sScrollXInner": "110%",
            "sScrollY": 200,
            "sDom": 'T<"clear">lfrtip',
            "oTableTools": {
                "aButtons": ["copy", "csv", "xls", "pdf"],
                "sSwfPath": "./table_tool2.0/media/swf/copy_cvs_xls_pdf.swf"
            },
            "aaSorting": [
                [0, 'desc']
            ]
        });
    });
});
</script>

HTML代码：

<body>


<input type="button" id="id_submit" name="txt_submit" value="Submit.." style="height: 24px; ">

<br>

<div id="div_prepack" >

    <table id="prepack" class="display" cellpadding="0" cellspacing="0" style="border-width: 2px; border-style: ridge; width: 1000px;">
        <thead>
                        <tr>
            <th>Site_id</th>
            <th>Low_ord_srl_no</th>
            <th>Start Date</th>
            <th>Pass Flag</th>
            <th>Emp_no</th>
            <th>Last Update </th>
            <th>ETL_batch_id </th>
        </tr>    
    </thead>

    <tbody>
        <tr>
            <td colspan="7"><span style="color: red;">Loading Data From Server...</span>   </td>
        </tr>

    </tbody>

    </table>

</div>

请告诉我上述代码是否有任何错误。我在服务器端处理时遇到错误（如上所述），因此滚动条没有显示，数据也没有显示。

Answer 1

尝试：

“sScrollY”：“100％”

或

“sScrollY”：“200px”。

你还得错误吗？

如何在datatable jquery插件中使用水平和垂直滚动与服务器端处理？

1 个答案: