Question

我正在使用带有过滤器，分页和排序的tablesorter插件。该样式在页面加载时应用非常慢（用户看到未格式化的表）。我想要简单地隐藏桌子直到它完全装满。

我怎样才能做到这一点？

这是我的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")
});

Answer 1

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

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

适合我。

Answer 2

在某些情况下，显示某些行以进行定位会很有帮助。在这种情况下，您首先会在页面加载时隐藏一些行，因此它没有那么多的渲染工作要做，然后在表格初始化之后，请确保它们已经完成一切都可见。

/* 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 event

将自己的课程添加到表格中

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

Plunker

中的演示

tableSorter缓慢加载

2 个答案:

Plunker