Используя TableSorter JQuery

У меня возникли некоторые проблемы с использованием TableSorter для сортировки таблицы, созданной в hta. Я не знаю, как включить tableorter на новой таблице. Ниже приведен тестовый html-файл. Для тестирования я рекомендую использовать IE, потому что содержит VBS. Спасибо!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
<head>
 <title>Test Tablesorter</title>
 <script type="text/javascript" src="js/jquery-latest.js"></script>
 <script type="text/javascript" src="js/jquery.tablesorter.js"></script>
 <script type="text/javascript" src="js/jquery.tablesorter.pager.js"></script>
 <script type="text/javascript" src="js/chili-1.8b.js"></script>
 <script type="text/javascript" src="js/docs.js"></script>
 <script type="text/javascript">
 $(function() {
  $("table")
   .tablesorter({widthFixed: true, widgets: ['zebra']})
   .tablesorterPager({container: $("#pager")});

 });
 </script>

</head>
<style>
table.tablesorter
{
 background-color: #CDCDCD;
 font-family: arial;
 font-size: 8pt;
 margin: 10px 0pt 15px;
 text-align: left;
 width: 100%;
}
table.tablesorter thead tr th, table.tablesorter tfoot tr th
{
 background-color: #e6EEEE;
 border: 1px solid #FFF;
 font-size: 8pt;
 padding: 4px;
}
table.tablesorter thead tr .header
{
 background-image: url(img/bg.gif);
 background-position: center right;
 background-repeat: no-repeat;
 cursor: pointer;
}
table.tablesorter tbody td
{
 background-color: #FFF;
 color: #3D3D3D;
 padding: 4px;
 vertical-align: top;
}
table.tablesorter tbody tr.odd td
{
 background-color: #F0F0F6;
}
table.tablesorter thead tr .headerSortUp
{
 background-image: url(img/asc.gif);
}
table.tablesorter thead tr .headerSortDown
{
 background-image: url(img/desc.gif);
}
table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp
{
 background-color: #8dbdd8;
}
</style>

<body>

<script language="VBscript">

Sub CheckSystem
strHTML = strHTML & "<table cellspacing='1' class='tablesorter' id='table'>"
strHTML = strHTML & "<thead> "
strHTML = strHTML & "<tr>"
strHTML = strHTML & "<th>Name</th>"
strHTML = strHTML & "<th>Major</th>"
strHTML = strHTML & "<th>Sex</th>"
strHTML = strHTML & "<th>English</th>"
strHTML = strHTML & "<th>Japanese</th>"
strHTML = strHTML & "</tr>"
strHTML = strHTML & "</thead> "
strHTML = strHTML & "<tfoot> "
strHTML = strHTML & "<tr>"
strHTML = strHTML & "<th>Name</th>"
strHTML = strHTML & "<th>Major</th>"
strHTML = strHTML & "<th>Sex</th>"
strHTML = strHTML & "<th>English</th>"
strHTML = strHTML & "<th>Japanese</th>"
strHTML = strHTML & "</tr>"
strHTML = strHTML & "</tfoot> "
strHTML = strHTML & "<tbody>"
strHTML = strHTML & "<tr>"
strHTML = strHTML & "<td>Student01</td>"
strHTML = strHTML & "<td>Languages</td>"
strHTML = strHTML & "<td>male</td>"
strHTML = strHTML & "<td>80</td>"
strHTML = strHTML & "<td>75</td>"
strHTML = strHTML & "<tr>"
strHTML = strHTML & "<tr>"
strHTML = strHTML & "<td>Student02</td>"
strHTML = strHTML & "<td>Languages</td>"
strHTML = strHTML & "<td>male</td>"
strHTML = strHTML & "<td>80</td>"
strHTML = strHTML & "<td>60</td>"
strHTML = strHTML & "<tr>"
strHTML = strHTML & "<tr>"
strHTML = strHTML & "<td>Student03</td>"
strHTML = strHTML & "<td>Languages</td>"
strHTML = strHTML & "<td>male</td>"
strHTML = strHTML & "<td>60</td>"
strHTML = strHTML & "<td>40</td>"
strHTML = strHTML & "<tr>"
strHTML = strHTML & "<tr>"
strHTML = strHTML & "<td>Student04</td>"
strHTML = strHTML & "<td>Languages</td>"
strHTML = strHTML & "<td>male</td>"
strHTML = strHTML & "<td>30</td>"
strHTML = strHTML & "<td>20</td>"
strHTML = strHTML & "<tr>"
strHTML = strHTML & "</tbody>"
strHTML = strHTML & "</table>"
strHTML = strHTML & "<span id='pager' class='pager'>"
strHTML = strHTML & "<form>"
strHTML = strHTML & "<img src='img/first.png' class='first'/>"
strHTML = strHTML & "<img src='img/prev.png' class='prev'/>"
strHTML = strHTML & "<input type='text' class='pagedisplay'/>"
strHTML = strHTML & "<img src='img/next.png' class='next'/>"
strHTML = strHTML & "<img src='img/last.png' class='last'/>"
strHTML = strHTML & "<select class='pagesize'>"
strHTML = strHTML & "<option selected='selected' value='5'>5</option>"
strHTML = strHTML & "<option value='10'>10</option>"
strHTML = strHTML & "<option value='30'>30</option>"
strHTML = strHTML & "<option  value='40'>40</option>"
strHTML = strHTML & "</select>"
strHTML = strHTML & "</form>"
strHTML = strHTML & "</span>"

DataArea.InnerHTML = strHTML
End Sub
</script>

<body>
<p><span id="DataArea"></span></p>
<input type="button"  class="button" value="CheckSystem" style="width:70" onClick="VBScript:CheckSystem">



</body>

</html>

Благодаря помощи, полученной от dartacus, который указал мне правильное направление, мне удалось найти временное решение, которое не связано с таймаутом (нумерация страниц все еще не работает правильно)

 <script type="text/javascript"> 


 $(document).ready(function(){

  $('#test-tablesorter').click(function(){
   $('table').addClass('tablesorter').tablesorter();
   $('table')
   .tablesorterPager({container: $("#pager")});
  }); 


});

</script>

Я добавил id="table-sorter" к кнопке. Есть некоторые проблемы с плагином плагинов этого скрипта через интернет. Мне нужно расследовать дальше.

Я нашел проблему с нумерацией страниц. Это было вызвано отсутствующим символом "/" в конце каждого файла. Мой оригинальный пост не закрывается должным образом (может произойти, когда я скопировал / вставил код, чтобы создать больше данных). Синтаксис таблицы был проблемой: "<" / tr ">"

Источник

1 ответ

Происходят две вещи:

1) Вы вызываете TableSort на Table # Table до того, как он будет отображен в браузере с помощью VBScript ниже по странице? Возможно, таблица еще не существует для сортировки.

2) Я никогда не использовал элемент tfoot, но не должен ли он идти после tbody?

НТН,

г

Хорошо, вы можете попробовать это вместо этого. Я не полностью проверил это, но это могло бы помочь.

Материал jquery был помещен в обработчик document.ready, а функция, которая делает таблицу сортируемой, имеет тайм-аут, установленный таким образом, что существует задержка в одну секунду, чтобы таблица могла быть обработана перед тем, как сделать ее сортируемой.

г

    function initTableSort(){

    $("table").tablesorter({widthFixed: true, widgets: ['zebra']});
    $("table").tablesorterPager({container: $("#pager")});

}

//execute when doc loaded
$(document).ready(function(){

    $('input#tableCreateBtn').click(function(){

    //give the table 1000 milliseconds to load before calling the fn which
    //makes it sortable

        setTimeout("initTableSort()", 1000);

    });

});
Источник
Другие вопросы по тегам