jquery datatable + tablesorter:保持显示直到所有内容都被加载?

时间:2013-04-20 09:26:00

标签: tablesorter

我将tablesorter与jquerycsvtotable结合使用。 一切正常,但是......在加载表的那一刻和显示tablesorter的时刻之间存在一个滞后,这使得数据在屏幕上没有任何格式化时出现。时间因数据量而异,在2到5秒之间。

有没有办法显示“加载”gif或者直到完成所有过程才能避免显示难看的数据?

谢谢!

PS:我并不是说当你点击某个标题单元格时,时间表输入会重新排序行,我知道已经安排了标题单元格中显示的可选处理gif ...

编辑:请在下面找到我的代码。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="/js/ts/css/theme.default.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="/js/ts/js/jquery.tablesorter.min.js"></script>
<script type="text/javascript" src="/js/ts/js/jquery.tablesorter.widgets.min.js"></script>
<script type="text/javascript" src="/js/csv/js/jquery.csvToTable.js"></script>

<script>
$(function() {
  var mytable = $('#tabla1')
    .CSVToTable('/est/data/cli_30_0000.txt',{
      loadingImage: '/js/csv/images/loading.gif',
      separator: ";"
    })
    .bind("loadComplete",function(){
      var footer = mytable.find('tr:last');
      mytable
        .find('thead').after( footer.wrap('<tfoot/>').parent() ).end()
        .tablesorter({
          sortList: [[5,0]],
          widthFixed : true,
          widgets: ["zebra", "filter", "stickyHeaders"],
          widgetOptions: {filter_hideFilters : true}
        });
    });
});
</script>

</head>
<body>

<p>
<a href=../../>Home</a> <a href=../>30</a> <a href=./>0000</a><br>
2013-04-15 12:45:17
</p>

<div>
<table id="tabla1" class="tablesorter">
</div>

</table>

</body>
</html>

1 个答案:

答案 0 :(得分:0)

我想知道解决方案是否就像在表中添加“tablesorter”类名一样简单。如果您使用的是非默认主题,则还应包含该主题名称:

  var mytable = $('#tabla1')
    .CSVToTable('/est/data/cli_30_0000.txt',{
      tableClass: 'tablesorter tablesorter-default', // adjust theme name here
      loadingImage: '/js/csv/images/loading.gif',
      separator: ";"
    })