Jquery Mobile を使用して Android アプリを開発しています。ページャーを使用した tablesorter プラグインで問題が発生しています。
ここに私のHTMLページがあります
<div id="mainPager" class="pager">
<form>
<div class="ui-grid-d">
<div class="ui-block-a"><input type="button" data-inline="true" data-mini="true" value="<<" class="first" /></div>
<div class="ui-block-b"><input type="button" data-inline="true" data-mini="true" value="<" class="prev" /></div>
<div class="ui-block-c"><input type="text" data-inline="true" data-mini="true" class="pagedisplay"/></div>
<div class="ui-block-d"><input type="button" data-inline="true" data-mini="true" value=">" class="next" /></div>
<div class="ui-block-e"><input type="button" data-inline="true" data-mini="true" value=">>" class="last" /></div>
</div>
<select class="pagesize">
<option selected="selected" value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
</select>
</form>
</div>
<table class="myTable" id="dataTable" >
<thead>
</thead>
<tbody>
</tbody>
</table>
これは私のjqueryコードです。
$(document).on('pagebeforecreate', '#main' ,function(){
fillRoTable() ;
});
function fillRoTable()
{
var html = '';
for (var key=0, size= 1; key<size;key++) {
html += '<tr><th>'
+ "Ticket #"
+ '</th><th>'
+ "Action"
+ '</th></tr>';
}
$('#dataTable thead').append(html);
$.ajax({url: "h**p://xyz.com/test/info?client=ig&docId=2313",
dataType: "jsonp",
async: true,
success: function (result) {
var html1 = '';
for (var key=0, size=25; key<size; key++) {
html1 += '<tr><td>'
+ key
+ '</td><td>'
+ (size-key)
+ '</td></tr>';
}
$('#dataTable tbody').append(html1);
$("#dataTable").tablesorter()
.tablesorterPager({container: $("#MainPager"), positionFixed: false});
},
error: function (request,error) {
alert('Network error has occurred please try again!');
}
});
}
今私の問題は、メインページが読み込まれるとすべてがうまく見えることですが、見出しの1つをタップして列をソートすると、テーブルが空になります。
ここで私が間違っていることを誰かに教えてもらえますか。
ありがとう