jquerycsvtotable + tablesorter: удерживать отображение, пока все не загрузится?

Я использую tablesorter в сочетании с jquerycsvtotable. Все работает нормально, но... есть задержка между моментом загрузки таблицы и моментом показа tablesorter, из-за чего данные появляются на экране без какого-либо форматирования. Время зависит от количества данных, от 2 до 5 секунд.

Есть ли способ показать «загрузку» gif или просто ничего, пока весь процесс не будет завершен, чтобы не показывать уродливые данные?

Спасибо!

PS: я не имею в виду, что сортировщик таблиц времени тратит на переупорядочивание строк, когда вы нажимаете на определенную ячейку заголовка, которая, как я знаю, уже упорядочена с необязательными изображениями обработки, показанными в заголовке...

РЕДАКТИРОВАТЬ: пожалуйста, найдите ниже мой код.

<!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>

tablesorter
person jm_    schedule 20.04.2013    source источник
comment
Можете ли вы поделиться кодом? В частности, как вы инициализируете csvToTable и tablesorter?   -  person Mottie    schedule 21.04.2013
comment
Добавлен код @Mottie. К сведению, CSV состоит из 2000 строк, 12 столбцов (один из них содержит ссылки),   -  person jm_    schedule 21.04.2013

Ответы (1)


arrow_upward
0
arrow_downward

Интересно, решение так же просто, как просто добавить в таблицу имя класса «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: ";"
    })
person Mottie    schedule 22.04.2013
comment
Извините за задержку с ответом. Ну, боюсь, это не работает. В этой таблице я использую тему по умолчанию, поэтому я просто скопировал/вставил ваш код. Не волнуйтесь, не критическая проблема. Спасибо. - person jm_; 24.04.2013