2014-04-04 23 views
3

這裏後無法正常工作的問題是:在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/

回答