页面加载后使用ajax加载数据表(jquery)和/或让图像首先加载
嘿伙计们。我有一个 Ajax 加载的数据表。加载进展顺利,但我注意到的一件事是页面上的文本已加载,但页眉图像和页脚图像是在 Ajax 调用后加载的。这在页面上看起来有点奇怪。我想知道是否有办法解决这个问题。我了解 jQuery 中的 setTimeOut 方法,但对如何将其与数据表一起使用感到困惑。
$(document).ready(function() {
var selected;
var selectedOutput;
var template;
var submitButton;
var insertedTable = $('#pkgLineTable').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"bPaginate": true,
"bLengthChange": true,
"bFilter": true,
"bSort": false,
"bInfo": true,
"bAutoWidth": false,
"bProcessing": true,
"bServerSide": false,
"sAjaxSource": '@{Overview.getPkgLineList()}',
"fnServerData": fnServerObjectToArray(['shortname', 'description'])
});
});
fnServerObjectToArray = function (aElements) {
return function (sSource, aaData, fnCallback) {
$.ajax({
"dataType": 'json',
"type": "GET",
"url": sSource,
"data": aaData,
"success": function (json) {
var a = [];
$.each(json, function(index, item) {
var inner = [];
for (var i = 0, iLen = aElements.length; i < iLen; i++) {
inner.push(item[aElements[i]]);
}
a.push(inner);
});
json.aaData = a;
fnCallback(json);
}
});
}
}
Hey guys. I have an Ajax-loaded data table. The load goes fine but the one thing I notice is the text on the page is loaded but the header image and footer image is loaded after the Ajax call. This looks a little weird on the page. I'm wondering if there is a way to get around this. I know about the setTimeOut method in jQuery but baffled on how to use that with data tables.
$(document).ready(function() {
var selected;
var selectedOutput;
var template;
var submitButton;
var insertedTable = $('#pkgLineTable').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"bPaginate": true,
"bLengthChange": true,
"bFilter": true,
"bSort": false,
"bInfo": true,
"bAutoWidth": false,
"bProcessing": true,
"bServerSide": false,
"sAjaxSource": '@{Overview.getPkgLineList()}',
"fnServerData": fnServerObjectToArray(['shortname', 'description'])
});
});
fnServerObjectToArray = function (aElements) {
return function (sSource, aaData, fnCallback) {
$.ajax({
"dataType": 'json',
"type": "GET",
"url": sSource,
"data": aaData,
"success": function (json) {
var a = [];
$.each(json, function(index, item) {
var inner = [];
for (var i = 0, iLen = aElements.length; i < iLen; i++) {
inner.push(item[aElements[i]]);
}
a.push(inner);
});
json.aaData = a;
fnCallback(json);
}
});
}
}
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
如果您想在图像完成后加载 ajax,请使用 load 而不是 .ready:
If you want to load the ajax after the images have finished, use load instead of .ready: