2

我在一张大桌子上使用带有过滤器、分页和排序功能的表格排序器插件。该样式在页面加载时应用非常缓慢（用户看到的是未格式化的表格）。我想简单地隐藏表格，直到它完全加载。

我怎样才能做到这一点？

这是我的 tableSorter 初始化代码：

$("#report").tablesorter({
  theme: 'blue',
  widthFixed: true,
  widgets: ["zebra", "filter", "savePagerSize"],
  widgetOptions: {
    filter_childRows: false,
    filter_columnFilters: true,
    filter_cssFilter: 'tablesorter-filter',
    filter_filteredRow: 'filtered',
    filter_formatter: null,
    filter_functions: null,
    filter_hideFilters: false,
    filter_ignoreCase: true,
    filter_liveSearch: true,
    filter_searchDelay: 300,
    filter_serversideFiltering: false,
    filter_startsWith: false,
    filter_useParsedData: false
  }

}).tablesorterPager({
  container: $("#pager")
});
4

2 回答 2

2

您可以默认隐藏表格并将样式设置为显示：无。

通过将样式更改为 display = 'block'，可以在 Document ready 中看到 make。

为我工作。

于 2013-09-12T18:11:37.533 回答
0

在某些情况下，出于定位目的显示某些行会很有帮助。在这种情况下，您首先在页面加载时隐藏一些行，这样它就没有太多的渲染工作要做，然后一旦表被初始化，确保它们都是可见的。

/* hide bulk of table until it's been initialized'*/
.tablesorter tbody tr:nth-child(n+10),
.tablesorter tfoot tr {
    display: none;
}
/* if we've been decorated, we've been initialized */
.tablesorter.tablesorter-bootstrap tbody tr,
.tablesorter.tablesorter-bootstrap tfoot tr {
    display: table-row
}

一旦初始化，Tablesorter 将使用任何小部件类自动装饰表格。如果您没有任何小部件，您可以通过点击tablesorter-initialized事件将自己的类添加到表格中

$("table").tablesorter({
  // this is equivalent to the above bind method
  initialized : function(table){
    $(table).addClass('tableInit');
  }
});

Plunker中的演示

于 2017-11-09T16:18:23.237 回答