jQuery DataTables - 启动缓慢,开头显示“普通”html 表
Posted
技术标签:
【中文标题】jQuery DataTables - 启动缓慢,开头显示“普通”html 表【英文标题】:jQuery DataTables - Slow initiation, "Normal" html table shown in the beginning 【发布时间】:2011-11-29 15:43:06 【问题描述】:我正在使用 jQuery DataTable 插件,但我担心脚本加载似乎需要一些时间,所以我的网页总是首先显示普通的 html 表格,在所有脚本完成后,表格将变为数据表。 我不认为这种外观可以接受,所以我希望在这里得到一些建议。我是否可以使脚本更快,或者不显示前面的普通表格? 顺便说一句,我从 _Layout.cshtml 头标记的 _Scripts 部分视图调用我的脚本
@Html.Partial("_Scripts")
(更新) 我试图隐藏表格,并在数据表初始化后显示它,但是,我得到一个没有表头的数据表。知道为什么会这样吗?
$('#stocktable').hide();
// Initialize data table
var myTable = $('#stocktable').dataTable(
// Try styling
"sScrollX": "100%",
"sScrollXInner": "100%",
"bScrollCollapse": true,
// To use themeroller theme
"bJQueryUI": true,
// To use TableTool plugin
"sDom": 'T<"clear">lfrtip',
// Allow single row to be selected
"oTableTools":
"sRowSelect": "single"
,
"fnInitComplete": function ()
$('#stocktable').show();
【问题讨论】:
【参考方案1】:我做了一个非常简单的解决方案,效果很好。 在 DataTable 初始化中,我使用了 show() 方法:
$(document).ready(function()
$('#example').dataTable(
"order": [[ 0, 'asc' ]]
);
$('#example').show();
);
... 在 HTML 表格中,我将样式 display:none:
<table id="example" class="display" cellspacing="0" style="display:none">
祝你好运!
【讨论】:
为我工作。谢谢。 这是一个伟大而简单的解决方案。非常感谢 在我以 50 毫秒延迟包装 show() 后为我工作:setTimeout(function () $("#example").show() , 50);
绝对精彩!快速加载 6.5k 行。【参考方案2】:
我遇到了同样的问题。试试这个:
var dTable=$("#detailtable").dataTable(
"bProcessing":true,
"bPaginate":false,
"sScrollY":"400px",
"bRetrieve":true,
"bFilter":true,
"bJQueryUI":true,
"bAutoWidth":false,
"bInfo":true,
"fnPreDrawCallback":function()
$("#details").hide();
$("#loading").show();
//alert("Pre Draw");
,
"fnDrawCallback":function()
$("#details").show();
$("#loading").hide();
//alert("Draw");
,
"fnInitComplete":function()
//alert("Complete");
【讨论】:
嗨,我可以知道你的#details 持有什么吗?因为每当我尝试选择保存我的数据表的 或插件应用的 datatable_wrapper 时,表格显示时表格标题格式就会消失 顺便说一句,我必须通过 css display:none 隐藏表格并使用您的示例 fndrawcallback 显示它,非常感谢 #details 是我的数据表的 容器。我的设置为 style=display:none;我使用 dataTable 函数上的回调方法来显示或重新隐藏表格。很高兴我能帮上忙! 变体 - 使用 fnInitComplete 代替 fnDrawCallback"fnInitComplete":function() $("#loading").hide(); $("#details").show(); this.fnAdjustColumnSizing(); // for header redraw
@tamersalama - 这是最好的解决方案,你应该把它作为一个答案。这基本上是我一直在寻找的,只是一种与适当的活动联系在一起的方式。我可以从那里得到它。谢谢!【参考方案3】:
[编辑添加:这个较旧的答案是指以前的 DataTables API。 jQueryUI 选项已弃用,替换建议可在此处找到:https://datatables.net/manual/styling/jqueryui 此外,fnInitCallback(与所有其他选项一样)放弃了匈牙利符号,现在是 initCallback]
原答案如下:
我的警告是我不熟悉 _Scripts 部分视图,所以下面的建议是我会给某人的建议,只是以“正常”方式包含和调用 javascript:
设置纯 HTML 表格的样式,使其与最终表格具有相同的外观。如果您启用了 jQuery UI (bJQueryUI: true
),这意味着将 jQuery UI 类放在“普通”表中,而不是等待 DT 添加它们。
使用各种 FOUC(无样式内容闪存)技术隐藏表格,直到准备好呈现。 DataTables API 具有有用的回调,您可以将其用于“立即显示”部分,例如 fnInitCallback。最基本(但会破坏可访问性)技术是使用 display:none 设置表格样式,并在回调中使用 $('#myTable').show()
或一些变体。在互联网上搜索应该会提供一些很好的解决方案来保持可访问性。
除此之外,这实际上只是(如您所说!)对“可接受”的容忍度问题。我们使用服务器端处理(返回的记录要少得多)、脚本加载器来加快脚本加载时间(我们正在试验 head.js,但还有其他的!),以及脚本的最小化版本。即便如此,我们有时会在它变成 DT 之前看到一张普通的表格,但由于互联网用户习惯于在加载元素时看到页面在他们眼前“构建”,因此这是一个可以接受的折衷方案。对你来说,可能不是。
祝你好运!
【讨论】:
嗨,我用隐藏和显示编辑了我的代码,但是我得到了一个没有标题的表格!任何想法??真的非常感谢... 确保您隐藏并显示某种包装 div。根据配置,DataTables 中一些看起来像“标题”的东西实际上并不是表的一部分。如果您在表格本身上调用隐藏和显示,您将丢失元素。 :-D 谢谢!我试图隐藏包装 $('#stocktable_wrapper').hide();但我的表格没有隐藏,在 DT 之前仍然显示纯 html 表格... 我必须查看您的页面才能确切知道发生了什么。当然,我的意思是笼统地隐藏某种“包装器”元素(使用通用术语),其中包含您的纯 HTML 表格。如果普通表没有被隐藏,那么当您尝试隐藏它时没有加载 jQuery,或者它不在该包装器内。 嗨,我通过设置不显示表格的样式得到它,然后在 fnDrawCallback 中显示它,非常感谢您的帮助...【参考方案4】:基于@hanzolo 的建议 - 这是我的评论作为答案(以及我的 dataTable 的样子):
var stockableTable = $('#stockable').dataTable(
"bLengthChange": false,
"iDisplayLength": -1,
"bSort": false,
"bFilter": false,
"bServerSide": false,
"bProcessing": false,
"sScrollY": "500px",
"sScrollX": "95%",
"bScrollCollapse": true,
// The following reduces the page load time by reducing the reflows the browser is invoking
"fnPreDrawCallback":function()
$("#loading").show();
,
"fnDrawCallback":function()
,
"fnInitComplete":function()
$("#details").show();
this.fnAdjustColumnSizing();
$("#loading").hide();
);
【讨论】:
【参考方案5】:我的工作解决方案是隐藏表格而不使用“显示:无”的“肮脏”技巧。普通的“display:none”样式会导致 jQuery 数据表的初始化问题。
首先,将你的数据表放在一个包装器 div 中:
<div id="dataTableWrapper" style="width:100%" class="dataTableParentHidden">
...data table html as described in jQuery Data Table documentation...
</div>
在 CSS 中:
.dataTableParentHidden overflow:hidden;height:0px;width:100%;
此解决方案隐藏数据表而不使用“display:none”。
数据表初始化后,您必须从包装器中删除类以显示表:
$('#yourDataTable').DataTable(...);
$('#dataTableWrapper').removeClass('dataTableParentHidden');
【讨论】:
这对我有用,其他答案与标题和:this.fnAdjustColumnSizing();不工作。谢谢大佬【参考方案6】:我认为您可能应该只在 _Layout.cshtml 中加载脚本,毕竟这就是它的用途。部分视图实际上适用于可以在其他区域或至少呈现的 HTML 内容中重复使用的段。
话虽如此,要做的一件简单的事情是隐藏表格直到它完成加载,或者甚至隐藏它并显示进度指示器。
你可以这样做:
// .loadTable() is some function that loads your table and returns a bool indicating it's finished
// just remember to check this bool within the function itself as it will be called over and over until it returns true
while (!loadTable())
// maybe show a progress bar
if ($('#myTable').css('display') != 'none'))
$('#myTable').hide(); // if it isn't already hidden, hide it
// hide progress bar
$('#myTable').show();
UDPATE:
如果 jQuery 表格插件有“成功”或“完成”回调,只需在页面加载时隐藏表格并在加载完成时显示。
$(document).ready(function ()
$('#myTable').hide();
// run plugin and .show() on success or finished
);
【讨论】:
嗨,我用隐藏和显示编辑了我的代码,但是我得到了一个没有标题的表格!任何想法??真的非常感谢... 如果您使用隐藏/显示代码更新您的问题,我可能会提供帮助。 需要查看 HTML 和$('#stocktable').dataTable();
方法的其余部分【参考方案7】:
我知道这是一个很老的问题,但也许我将来可以帮助某人,怎么知道...... 因此,经过数小时后,我找到了唯一适合我的解决方案(表格将在渲染完成后加载):
<html>
<head>
<style>
.dn
display: none;
</style>
</head>
<body>
<div id="loadDiv" class="firstDivClass secondDivClass">Loading...<div>
<table id="myTable" class="dn firstTableClass secondTableClass">
<tr><td>Something Here</td></tr>
</table>
</body>
<script>
$(document).ready(function()
showMeTheTabel();
);
function shoMeTheTable()
var dTable = $('#myTable').dataTable(
"aoColumnDefs": [
bla, bla
],
"oLanguage":
"bla" : "bla"
,
"fnPreDrawCallback":function()
,
"fnDrawCallback":function()
$("#loading").addClass('dn');
$('#tabel').removeClass('dn');
,
"fnInitComplete":function()
console.log("Complete") // optional and Done !!!
);
</script>
</html>
【讨论】:
【参考方案8】:这是由于 ColVis 插件。从 sDOM 中删除“W”,你的表格渲染就会飞起来(尽管没有下拉菜单)
【讨论】:
嗨,你能举个例子吗?谢谢【参考方案9】: 以下是一个 node.js 车把示例。但是,您可以使用您正在使用的任何 Web 前端框架来呈现数据。 如果您使用的是引导程序,则最初可以使用隐藏类隐藏表格,或者手动隐藏元素。 然后在 initComplete 回调中,您可以使用 jQuery 删除隐藏的类,以便在表格完全加载后才显示表格。<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet">
<table id="stocktable" class="table hidden">
<thead>
<tr>
<th>Name</th>
<th>Last Name</th>
<th>Age</th>
<th>Street Address</th>
<th>State</th>
<th>Country</th>
</tr>
</thead>
<tbody>
#each devices
<tr id="id">
<td>first_name</td>
<td>last_name</td>
<td>age</td>
<td>street_address</td>
<td>state</td>
<td>country</td>
</tr>
/each
</tbody>
</table>
<script>
$(document).ready(function()
$('#stocktable').DataTable(
columns: [
person: 'first_name'
,
person: 'last_name'
,
person: 'age'
,
person: 'street_address'
,
person: 'state'
,
person: 'country'
],
initComplete: function()
// Unhide the table when it is fully populated.
$("#stocktable").removeClass("hidden");
);
);
</script>
例如:
【讨论】:
【参考方案10】:由于顶部的过滤器,我的数据表在帖子之间跳转。
简单的解决方案: 使用 display:none 隐藏表格,然后在调用 DataTable() 之前使用 jquery .fadeIn()。
【讨论】:
以上是关于jQuery DataTables - 启动缓慢,开头显示“普通”html 表的主要内容,如果未能解决你的问题,请参考以下文章
[尝试运行或启动dataTables.js时收到TypeError
尝试运行或启动 dataTables.js 时收到 TypeError