I am using 'Datatable Jquery plugin' with server side processing in my application. Now I want to use Horizontal and Vertical Scroll Bars in the datatable.
我在我的应用程序中使用'Datatable Jquery插件'和服务器端处理。现在我想在数据表中使用水平和垂直滚动条。
So to implement this, I used 'sScrollX', 'sScrollXInner' and 'sScrollY' in datatable code (as mentioned below) :
为了实现这一点,我在数据表代码中使用了'sScrollX','sScrollXInner'和'sScrollY'(如下所述):
"sScrollX": "100%",
"sScrollXInner": "110%",
"sScrollY": 200,
after this, when I executed my application, the data did not come in datatable and an error occured in browser like "Object doesn't support this property or method" and it's indicating error in 'jquery.dataTables.js' JavaScript file.
在此之后,当我执行我的应用程序时,数据没有进入数据表,并且浏览器中出现错误,例如“对象不支持此属性或方法”,并且它在'jquery.dataTables.js'JavaScript文件中指示错误。
Here I am sharing the URL of screenshots of datatable and error occurred respectively :
这里我分享了数据表截图的URL和发生的错误:
Below URL(Link) shows the datatable, where data didn't came and scrollbars also not showing in a proper way.
URL(链接)下面显示数据表,其中没有数据,滚动条也没有以正确的方式显示。
Problematic dataTable screenshot
有问题的dataTable截图
Below URL(Link) shows the error, which comes when datatable initialised.
URL(链接)下面显示了数据表初始化时出现的错误。
发生错误(截图)
Below are the JavaScript and HTML Code what we are using in my application:
以下是我们在应用程序中使用的JavaScript和HTML代码:
JavaScript Code :
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 Code :
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>
Please tell me if anything wrong in above mentioned code. I am getting error (as mentioned) at the time of server side processing, hence scroll bars are not showing and data are also not coming.
如果上述代码有任何问题,请告诉我。我在服务器端处理时遇到错误(如上所述),因此滚动条没有显示,数据也没有出现。
1 个解决方案
#1
0
try:
"sScrollY": "100%"
or
"sScrollY": "200px".
Do you still get the error?
你还得错吗?
#1
0
try:
"sScrollY": "100%"
or
"sScrollY": "200px".
Do you still get the error?
你还得错吗?