阿贾克斯后的tablesorter未初始化取代HTML

Question

我使用Mottie的jQuery的的tablesorter插件： https://mottie.github.io/tablesorter/docs/

我使用的是服务器端的处理寻呼机插件，和我建立在服务器上的HTML和发送它返回的是寻呼机插件的ajaxProcessing函数的JSON结果。

我的表格HTML被正确加载，但Tablesorter并没有做到这一点（为好间距的列添加colgroup，并更新THEAD以使列可排序，并启用我用HTML添加的过滤器下拉列表。 ）

这是我开始与HTML的剪断：

<table class="tableMain" id="scenarioTable"> 
    <thead> 
     <tr class="tableRowHeader"> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td> 
       <div class="loadingCircle"></div> 
      </td> 
     </tr> 
    </tbody> 
</table> 

（以下简称 “loadingCircle” 类只是一个CSS占位符动画; “tableMain” 和 “tableRowHeader” 的样式类别处定义）

。

这是我的Jav ascript：

$(function() { 
    $("#scenarioTable").tablesorter({ 
     cancelSelection: true, 
     debug: true, 
     emptyTo: "zero", 
     serverSideSorting: true, 
     showProcessing: true, 
     sortReset: true, 
     theme: "custom", 
     widthFixed: true, 
     widgets: ["filter", "zebra"], 
     widgetOptions: 
      { 
       filter_childRows: false, 
       filter_columnFilters: true, 
       filter_formatter: null, 
       filter_hideFilters: false, 
       filter_reset: '.clearFilters', 
       filter_serversideFiltering: true 
      } 
    }) 
    .tablesorterPager({ 
     container: $(".scenarioPager"), 
     ajaxObject: { 
      type: 'POST', 
      dataType: 'json', 
      data: { scenarioID: 1000 }, 
      success : function(){ $("#scenarioTable").trigger("update"); } 
     }, 
     ajaxProcessing: function(result, table, xhr){ 
      if (result && result.hasOwnProperty('mScenarioTableHTML')) { 
       var toReturn = { 
        total : result["mTotalRows"], 
        filteredRows : result["mTotalFilteredRows"] 
       } 
       $(table).html(result["mScenarioTableHTML"]); 
       return toReturn; 
      } 
     }, 
     ajaxUrl: "my URL goes here", 
     page: 0, 
     pageReset: 0, 
     processAjaxOnInit: true, 
     size: 1000, 
    }); 
}); 

在页面加载时，的tablesorter更新表HTML于此，如预期的那么：与HTML我

<table class="tableMain tablesorter tablesorter-custom tablesorter749b92e50ae53 hasFilters tablesorter-processing" id="scenarioTable" role="grid" aria-describedby="scenarioTable_pager_info"> 
    <colgroup class="tablesorter-colgroup"><col style="width: 100%;"></colgroup> 
    <thead> 
     <tr class="tableRowHeader" role="row"> 
     </tr> 
    </thead> 
    <tbody aria-live="polite" aria-relevant="all"></tbody> 
</table> 

然后我ajaxProcessing功能取代了COLGROUP，THEAD和TBODY标签从服务器发送，和HTML最终看起来像这样：

<table class="tableMain tablesorter tablesorter-custom tablesorter792090cf9b53c hasFilters" id="scenarioTable" role="grid" aria-describedby="scenarioTable_pager_info"> 
    <thead> 
     <tr class="tableRowHeader"> 
      <th class="filter-select"> 
       Trial # 
      </th> 
      <th class="filter-select"> 
       Time (sec) 
      </th> 
     </tr> 
     <tr> 
      <td> 
       <select name="trial" id="trial"> 
        <option value="" selected="selected"> </option> 
        <option value="1">1</option> 
        <option value="2">2</option> 
       </select> 
      </td> 
      <td> 
       <select name="time" id="time"> 
        <option value="" selected="selected"> </option> 
        <option value="10.5">10.5</option> 
        <option value="13.4">13.4</option> 
       </select> 
      </td> 
     </tr> 
    </thead> 
    <tbody> 
     <tr class="odd"> 
      <td id="101" class="notFlagged"> 
       1 
      </td> 
      <td id="102" class="flagged"> 
       13.4 
      </td> 
     </tr> 
     <tr class="even"> 
      <td id="103" class="notFlagged"> 
       2 
      </td> 
      <td id="104" class="notFlagged"> 
       10.5 
      </td> 
     </tr> 
    </tbody> 
</table> 

所以只的tablesorter增加了“奇”和“甚至”类的斑马条纹，而不是其他的TR标签。 HTML的其余部分正是我从服务器发送的内容。

有没有办法让Tablesorter更新HTML我加载，或者是否Tablesorter必须建立HTML本身，以添加在排序和过滤的东西？

Answer 1

寻呼机ajaxProcessing函数不应该替换整个表。如果您想更新标题，最好包含相同数量的列（请参阅this demo的HTML）。取而代之的是返回the documentation中描述的ajaxProcessing函数的headers值，用于返回对象。

如果你必须更新整个表，请不要使用ajaxProcessing函数。而是绑定到寻呼机事件，则：

• 销毁当前tablesorter实例，并在分页器完成后重新初始化它。
• 或者，使用updateAll更新tablesorter的thead和tbody内容。这不被推荐，因为它仍然有问题，并可能导致内存泄漏。