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內容加載到頁面上時，不會創建小部件。在你加載數據後解決這個觸發器的創建方法。

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