這裏後無法正常工作的問題是:在columntoggle模式/列按鈕jQuery Mobile的表AJAX調用
JS腳本是通過AJAX調用PHP腳本。這個腳本構建了一些html代碼,產生了一個h3標題和一個columntoggle
模式的表格塊。結果被插入到my_content div中,並且調用table()
以jqm方式繪製表格。
function get_table()
{ $.ajax({
type:'post',dataType:'text',cache:false
,url:'script.php'
,data:({token:tok, sort:srt})
,success:function(data,status,request)
{ $('#my_content').html(data);
if($('#my_table').length) $('#my_table').table();
}
}
<body>
<div id="my_content"></div>
</body>
這裏的PHP腳本構建什麼樣的想法:
<div class="ui-corner-all custom-corners">
<div class="ui-corner-all custom-corners">
<h3>My Table</h3>
</div>
<div class="ui-body ui-body-a">
<table id="my_table" data-role="table" data-mode="columntoggle" border="0" cellpadding="4" cellspacing="1" class="ui-responsive table-stroke" data-column-btn-theme="a" data-column-btn-text="Columns" data-column-popup-theme="a">
<thead>
<tr>
<th data-priority="" colspan="1"><a href="#" onclick="re_sort('def');">Default</a></th>
<th data-priority="1" colspan="2"><a href="#" onclick="re_sort('fil');">Files</a></th>
...
</tr>
</thead>
<tbody>
<td>$type</td>
<td>$number</td>
<td>$ratio</td>
...
</tbody>
<tfooter>
<td>total</td>
<td>$sum_number</td>
<td>100%</td>
...
</tfooter>
</table>
</div>
</div>
這在表的頂部,讓用戶選擇他要顯示什麼樣的列正常工作,甚至列按鈕或不。
現在在表頭中有鏈接。他們調用js re_sort函數來更改排序條件,然後重新顯示錶格。
function re_sort(new_srt)
{ srt=new_srt;
get_table();
}
這也很好。
我的問題是,表已重新繪製新的排序條件後,列按鈕不顯示/隱藏表列的影響。
我試圖清理表對象,他對事件有:
$('#my_table').empty(); or $('#my_content').empty();
前
$('#my_content').html(data);
和其他一些技巧,但我卡住了!
注:
$('#my_table').trigger('create');
沒有工作過。
看來,我必須調用更多的東西來告訴jqm我希望表格被重新處理爲新的。
更新:我寫了一個例子來說明這個問題:http://jsfiddle.net/komet163s/2P8BG/20/