0

tablesorter を使用して、hta 内で生成されたテーブルをソートする際に問題が発生しています。新しいテーブルで tablesorter を有効にする方法がわかりません。以下はテスト用の html ファイルです。VBS が含まれているため、テスト目的で IE を使用することをお勧めします。どうも！

<!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" を追加しました。インターネットを介したこのスクリプトのページネーション プラグインには、いくつかの問題があります。さらに調査する必要があります。

ページネーションの問題を発見しました。これは、各 raw の末尾に「/」がないことが原因でした。元の投稿が適切に閉じられません (コードをコピーして貼り付けてデータを作成したときに発生する可能性があります)。テーブルの構文が問題でした: "<"/tr">"

4

1 に答える 1

0

2つのことが起こります：

1）ページのさらに下のvbscriptによってブラウザにレンダリングされる前に、table＃tableでtablesorterを呼び出していますか？テーブルはまだソートされていない可能性があります。

2）実際にtfoot要素を使用したことはありませんが、tbodyの後に来る必要はありませんか？

HTH、

G

さて、代わりにこれを試すことができます。私はそれを完全にテストしていませんが、それは役立つかもしれません。

jqueryのものはdocument.readyハンドラーに入れられ、テーブルをソート可能にする関数にはタイムアウトが設定されているため、テーブルをソート可能にする前にテーブルをレンダリングできるように1秒の遅延があります。

G

    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);

    });

});
于 2010-11-15T09:29:28.067 に答える