jQuery TableSorter過濾器不能在AJAX動態表上工作

Question

我使用jQuery TableSorter過濾器爲我的報告組件在Joomla框架。

我管理通過基於用戶數據庫表選擇調用AJAX創建動態表。 TableSorter功能（如排序和傳呼機）工作得很好，但Filter僅適用於在頁面加載時生成的默認表格，而不適用於由AJAX構建的動態表格。

在這裏，他們是我摘錄代碼：

component/com_report/views/report/tmpl/default.php 

<script type="text/javascript"> 
    jQuery.noConflict(); 
    jQuery(document).ready(function($) { 
     $("#tblReportMain") 
      .tablesorter({debug: false, widthFixed: true, widgets: ['zebra']}) 
      .tablesorterFilter({filterContainer: $("#filter-box"), 
           filterClearContainer: $("#filter-clear-button"), 
           filterCaseSensitive: false}) 
      .tablesorterPager({container: $('#pager')}); 

     $(function(){ 
      . //some codes to be hidden for simplicity 
      . 

      $('#buttonGenerateReport').live('click', function() { 
       . //some codes to be hidden for simplicity 
       . 

       if (aryColTableChecked.length > 0) { 
        $.ajax({ 
          type: "POST", 
          url: "index.php?option=com_report&view=report&format=raw&task=showSelectedReport", 
          data: { 
           dbTableName: selectedDBTable, 
           dbTableColumns: aryColTableChecked 
          }, 
          success: function(result) { 
             $("#tblReportMain").remove(); 
             $("#divReportContent").html(result); 
             $("#tblReportMain") 
              .tablesorter({debug: false, widthFixed: true, widgets: ['zebra']}) 
              .tablesorterFilter({filterContainer: $("#filter-box"), 
                   filterClearContainer: $("#filter-clear-button"), 
                   filterCaseSensitive: false}) 
              .tablesorterPager({container: $('#pager')}); 
             // let the plugin know that we made a update 
             $("#tblReportMain") 
              .trigger("update") 
              .trigger("appendCache") 
              .trigger("applyWidgets"); 
            }, 
          error: function(xhr, textStatus, errorThrown) { 
             if (textStatus !== null) { 
              alert("error: " + textStatus); 
             } else if (errorThrown !== null) { 
              alert("exception: " + errorThrown.message); 
             } 
             else { 
              alert ("AJAX error undefined"); 
             } 
          } 
        }); 
    . //some codes to be hidden for simplicity 
    . 
    .   

    <table width="100%"> 
     <tr> 
      <td align="left" width="50%"> 
       Search: <input name="filter" id="filter-box" value="" maxlength="30" size="30" type="text"> 
         <input id="filter-clear-button" type="submit" value="Clear"/> 

      </td> 
      <td align="right" valign="right" width="50%"> 
       Export: <button id="buttonExportCSV" type="button" onclick="return false;"><?php echo JText::_('COM_REPORT_BUTTON_EXPORT_CSV'); ?></button> 
         <button id="buttonExportXLS" type="button" onclick="return false;"><?php echo JText::_('COM_REPORT_BUTTON_EXPORT_XLS'); ?></button> 
      </td> 
     </tr> 
    </table> 

在我的組件控制器文件，以構建動態表如下：

component/com_report/controller.php 

    /* 
    * Process to showSelectedReport 
    * This function is called by JQuery Ajax function at object Report View default.php 
    */ 
    public function showSelectedReport() 
    { 
     $dbTableName = JRequest::getVar('dbTableName', '', 'post', 'string'); 
     $dbTableColumns = JRequest::getVar('dbTableColumns', '', 'post', 'array'); 

     if (!empty($dbTableName)) { 
      $model = $this->getModel(); 

      if (!($model->showSelectedReport($dbTableName, $dbTableColumns, $rows, $pageNav, $lists))) { 
       if (count($errors = $this->get('Errors'))) { 
        JError::raiseError(500, implode('<br />', $errors)); 
        return false; 
       } 
      } 

      echo '<table id="tblReportMain" class="tablesorter">'; 
      echo '<thead>'; 
      echo '<tr>'; 

      foreach($dbTableColumns as $dbTabColNames) 
       echo '<th>' . JText::_($dbTabColNames) . '</th>'; 

      echo '</tr>'; 
      echo '</thead>'; 

      echo '<tbody>'; 

      $k = 0; 

      for($i=0, $n=count($rows); $i < $n ; $i++){ 
       $row = &$rows[$i]; 

       echo '<tr class="row' . $k . '">'; 

       foreach($row as $rowVal) { 
        echo '<td>' . $rowVal . '</td>'; 
       } 

       echo '</tr>'; 

       $k = 1 - $k; 
      } 

      echo '</tbody>'; 

      echo '<tfoot>'; 
      echo '<tr>'; 

      foreach($dbTableColumns as $dbTabColNames) 
       echo '<th>' . JText::_($dbTabColNames) . '</th>'; 

      echo '</tr>'; 
      echo '</tfoot>'; 
      echo '</table>'; 
     } else 
      echo '<table><tr><td>Cannot get the selected Table Information</tr></td></table>'; 
    } 

每當我把字符（縣）進入「過濾器-box「輸入，在動態表中沒有響應，但默認表將被過濾。當我點擊「filter-clear-button」按鈕時，它將刷新整個頁面並返回到默認表格。

正如你可以看到我的上述代碼，我試圖使用在this subject和this discussion討論的解決方案，但它仍然無法工作。

非常感謝您的幫助。

Answer 1

我解決了我的問題！ :-)只是爲了與你分享我所做的一切，以防你遇到像我一樣的問題。

component/com_report/views/report/tmpl/default.php 

        $.ajax({ 
          type: "POST", 
          url: "index.php?option=com_report&view=report&format=raw&task=showSelectedReport", 
          data: { 
           dbTableName: selectedDBTable, 
           dbTableColumns: aryColTableChecked 
          }, 
          success: function(result) { 
             $("#tblReportMain").remove(); 
             $("#divReportContent").html(result); 

             $("#tblReportMain") 
              .tablesorter({debug: false, widthFixed: true, widgets: ['zebra']}) 
              .tablesorterFilter({filterContainer: $("#filter-box"), 
                   filterClearContainer: $("#filter-clear-button"), 
                   filterCaseSensitive: false}) 
              .tablesorterPager({container: $('#pager')}); 
             // let the plugin know that we made a update 
             $("#tblReportMain") 
              .trigger("update") 
              .trigger("appendCache") 
              .trigger("applyWidgets"); 
            }, 

改爲：

    $.ajax({ 
          type: "POST", 
          url: "index.php?option=com_report&view=report&format=raw&task=showSelectedReport", 
          data: { 
           dbTableName: selectedDBTable, 
           dbTableColumns: aryColTableChecked 
          }, 
          success: function(result) { 
             //$("#tblReportMain").remove(); 
             //$("#divReportContent").html(result); 
             $("#tblReportMain").html(result); 

             $("#tblReportMain") 
              .tablesorter({debug: false, widthFixed: true, widgets: ['zebra']}) 
              .tablesorterFilter({filterContainer: $("#filter-box"), 
                   filterClearContainer: $("#filter-clear-button"), 
                   filterCaseSensitive: false}) 
              .tablesorterPager({container: $('#pager')}); 
             // let the plugin know that we made a update 
             $("#tblReportMain") 
              .trigger("update") 
              .trigger("appendCache") 
              .trigger("applyWidgets"); 
            }, 

，並在我的組件Controller.php這樣我就不必再返回 「表」 HTML標記。所以我說下面的代碼行：

 // echo '<table id="tblReportMain" class="tablesorter">'; 
     // echo '</table>'; 

，我還加JQuery的事件按鈕「濾波器清晰的按鈕」是如下：

 $('#filter-clear-button').live('click', function() { 
      if ((typeof selectedDBTable == 'undefined') || selectedDBTable == 'None') { 
       return true; 
      } else { 
       $('#buttonGenerateReport').click(); 
       return false; 
      } 

     });