jQuery DataTables - 启动缓慢，“正常"开头显示的 html 表格 [英] jQuery DataTables - Slow initiation, "Normal" html table shown in the beginning
问题描述
我正在使用 jQuery DataTable 插件，但我担心脚本加载似乎需要一些时间，所以我的网页总是先显示普通的 html 表，然后在所有脚本完成后，该表将变为数据表.我不认为这种外观是可以接受的，所以我希望可以在这里得到一些建议.我是否可以使脚本更快，或者不显示前面的普通表格?顺便说一句，我从 _Layout.cshtml head 标记处的 _Scripts 部分视图调用我的脚本
I'm using jQuery DataTable plugin, but I got a concern where the scripts loading seems to take some time, so my web page is always displaying the ordinary html table first, and after all script done, the table will then become DataTable. I don't think this kind of appearance is acceptable, so I hope can get some advices here. whether I can make the scripts faster, or don't display the plain table ahead? Btw, I am calling my script from a _Scripts partial view at my _Layout.cshtml head tag
@Html.Partial("_Scripts")
(更新)我试图隐藏表，并在数据表初始化后显示它，但是，我得到了一个没有表头的数据表.知道为什么会这样吗?
(UPDATE) I tried to hide the table, and show it after the datatable initialize, however, I get a datatable without the table header. Any idea why this is happening?
$('#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();
}
推荐答案
[edit to add: 这个较旧的答案是指以前的 DataTables API.不推荐使用 jQueryUI 选项，并在此处找到替换建议:https://datatables.net/manual/styling/jqueryui 此外，fnInitCallback(与所有其他选项一样)放弃了匈牙利符号，现在是 initCallback]
[edit to add: This older answer refers to the previous DataTables API. The jQueryUI options are deprecated and recommendations for replacement are found here: https://datatables.net/manual/styling/jqueryui Also, fnInitCallback (as with all other options) dropped Hungarian notation and is now initCallback]
原答案如下:
我的警告是我不熟悉 _Scripts 部分视图，所以下面的建议是我会给某人的建议，只是以正常"方式包含和调用 JavaScript:
My caveat is that I am not familiar with _Scripts partial views, so the advice below is what I would give someone just including and calling JavaScript in the 'normal' ways:
设置纯 HTML 表格的样式，使其与最终表格具有相同的外观.如果您启用了 jQuery UI (
bJQueryUI: true)，这意味着将 jQuery UI 类放在普通"表中，而不是等待 DT 添加它们.
Style the plain HTML table so that it shares the same appearance as the final. If you have jQuery UI enabled (
bJQueryUI: true), this means having the jQuery UI classes in the 'plain' table rather than waiting for DT to add them.
使用各种 FOUC(无样式内容闪现)技术隐藏表格，直到它准备好呈现.DataTables API 具有有用的回调，您可以将其用于立即显示"部分，例如 fnInitCallback.最基本的(但会损害可访问性)技术是使用 display:none 设置表格样式，并在回调中使用 $('#myTable').show() 或一些变体.在互联网上搜索应该会提供一些很好的解决方案来保持可访问性.
Use various FOUC (flash of unstyled content) techniques to hide the table until it is ready to render. DataTables API has useful callbacks that you can use for the "show it now" part of things, such as fnInitCallback. The most basic (but accessibility-damaging) technique is to style the table with display:none, and in the callback, use $('#myTable').show() or some variation. Searching on the internet should provide some great solutions that preserve accessibility.
除此之外，这实际上只是(如您所说！)对可接受"的容忍度问题.我们使用服务器端处理(返回的记录要少得多)、脚本加载器以加快脚本加载时间(我们正在尝试使用 head.js，但还有其他的！)，以及脚本的最小化版本.即便如此，我们有时会在它变成 DT 之前看到普通表格片刻，但由于互联网用户习惯于在加载元素时在他们眼前构建"页面，因此这是一个可以接受的权衡.对你来说，可能不是.
Other than that, it's really just a question of (as you say!) tolerance for "acceptable". We use server-side processing (returning far fewer records), a script loader for faster script loading time (we're experimenting with head.js but there are others!), and the minimized versions of the scripts. Even with this, we sometimes see the plain table for a moment before it becomes a DT, but since internet users are accustomed to seeing pages being 'built' before their eyes as elements are loaded, it was an acceptable tradeoff. For you, it might not be.
祝你好运！
这篇关于jQuery DataTables - 启动缓慢，“正常"开头显示的 html 表格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
