jQuery Mobile ColumnToggle 在 AJAX 调用后无法正常工作的表

Question

我有一个显示在某个页面上的表格。列切换适用于此表，因为它已加载到页面中。表结构如下所示：

<table data-role="table" id="table-column-toggle" data-mode="columntoggle" class="ui-responsive table-stroke infotbl hidecol">
    <thead>
    <tr>
        <th data-priority="1" class="ui-table-priority-1">Campaign</th>
        <th data-priority="1" class="ui-table-priority-1">Description</th>
        <th data-priority="3" class="ui-table-priority-3">Leads</th>
        <th data-priority="3" class="ui-table-priority-3">Quotes</th>
        <th data-priority="3" class="ui-table-priority-3">Sales</th>
        <th data-priority="4" class="ui-table-priority-4">Premium</th>
        <th data-priority="5" class="ui-table-priority-5">P-Factor</th>
        <th data-priority="1" class="ui-table-priority-1">Lead To Quote</th>
        <th data-priority="1" class="ui-table-priority-1">Sale Conversion</th>
        <th data-priority="2" class="ui-table-priority-2">Total Comm</th>
        <th data-priority="2" class="ui-table-priority-2">IMU</th>
        <th data-priority="1" class="ui-table-priority-1">Total After IMU</th>
        <th data-priority="1" class="ui-table-priority-1">VPL</th>
    </tr>
    </thead>
    <tbody>
        <tr>
            <td class="alleft">1013-HCBC-1</td>
            <td class="alleft"></td>
            <td>1</td>
            <td>0</td>
            <td>0</td>
            <td>0.00</td>
            <td>4</td>
            <td>0%</td>
            <td>0%</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
        </tr>
        <tr>
            <td class="alleft">1013-LIFE-1</td>
            <td class="alleft">medicalaidsite.co.za</td>
            <td>46</td>
            <td>15</td>
            <td>3</td>
            <td>506.00</td>
            <td>4</td>
            <td>33%</td>
            <td>7%</td>
            <td>2024.00</td>
            <td>355.09</td>
            <td>1420.35</td>
            <td>30.88</td>
        </tr>
    </tbody>
</table>

表格会根据所选的日期范围而变化。我通过 AJAX 发送数据，然后有一个脚本处理它并返回一个与此类似的表。问题是：列切换不适用于AJAX返回的数据（表）。

这是 AJAX/Javascript 代码：

$('.frankbtngo').click(function(){

        var date = $('#frankdate').val();

        $('#frankstats').html(fetch_data);

        $.ajax({
            type: 'post',
            url: 'frankstatsfilter.php',
            data: {
                date:date
            },
            success:function(data){
                $('#frankstats').html(data);
            }
        });
    });

我尝试将$(".hidecol").table("refresh"); 放在成功部分，但它不起作用。有什么办法可以重新启用/重新应用列切换到 AJAX 返回的表？

Answer 1

当您将 html 内容加载到页面上时，不会创建小部件。要解决这个问题，请在加载数据后触发 create 方法。

success:function(data){
    $('#frankstats').html(data);
    $('#frankstats').trigger('create');
}