Question

问题在于：

js脚本通过ajax调用PHP脚本。此脚本构建了一些html代码，在columntoggle模式下生成了h3标题和表格块。结果插入到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/

Answer 1

尝试添加此 $（＆＃34;＃my_table-popup-popup＆＃34;）。remove（）; 此处：

$('#my_content').html(code);
$("#my_table-popup-popup").remove();  
if($('#my_table').length) $('#my_table').table();

我在这个答案中找到了解决方案： JQuery Mobile update table via AJAX and column-toggle stops working

似乎工作：http://jsfiddle.net/2P8BG/26/

在ajax调用之后，columntoggle模式/列按钮中的jQuery移动表不起作用

1 个答案: