jQuery TableSorter筛选器在AJAX动态表上不起作用

我正在Joomla框架中为我的报表组件使用jQuery TableSorter过滤器

我通过基于用户数据库表选择调用AJAX来创建动态表。TableSorter特性（如排序和寻呼机）工作得很好，但是过滤器只在页面加载时构建的默认表上工作，而不是在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/views/report/tmpl/default.php
jQuery.noConflict（）；
jQuery（文档）.ready（函数（$）{
$（“tblReportMain”）
.tablesorter（{debug:false，widthFixed:true，widgets:['zebra']}）
.tablesorterFilter（{filterContainer:$（“#筛选器框”），
filterClearContainer:$（“#过滤器清除按钮”），
filterCaseSensitive:false}）
.tablesorterPager（{container:$（'#pager'））}）；
$（函数（）{
.//为了简单起见，需要隐藏一些代码
.
$（'#buttonGenerateReport'）.live（'单击'，函数（））{
.//为了简单起见，需要隐藏一些代码
.
如果（aryColTableChecked.length>0）{
$.ajax({
类型：“POST”，
url:“index.php？option=com_report&view=report&format=raw&task=showSelectedReport”，
数据：{
dbTableName:selectedDBTable，
dbTableColumns:aryColTableChecked
},
成功：功能（结果）{
$（“#tblReportMain”）.remove（）；
$（“#divReportContent”）.html（结果）；
$（“tblReportMain”）
.tablesorter（{debug:false，widthFixed:true，widgets:['zebra']}）
.tablesorterFilter（{filterContainer:$（“#筛选器框”），
filterClearContainer:$（“#过滤器清除按钮”），
filterCaseSensitive:false}）
.tablesorterPager（{container:$（'#pager'））}）；
//让插件知道我们进行了更新
$（“tblReportMain”）
.触发器（“更新”）
.trigger（“appendCache”）
.trigger（“applyWidgets”）；
},
错误：函数（xhr、textStatus、errorshown）{
如果（textStatus！==null）{
警报（“错误：+textStatus”）；
}else if（errorThrown！==null）{
警报（“异常：+errorshown.message”）；
}
否则{
警报（“AJAX错误未定义”）；
}
}
});
.//为了简单起见，需要隐藏一些代码
.
.          
搜索：
出口：

在我的组件控制器文件中，构建动态表的步骤如下：

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>';
    }

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

        });

component/com\u report/controller.php
/*
*显示SelectedReport的过程
*JQuery Ajax函数在object Report View default.php中调用此函数
*/
公共函数showSelectedReport（）
{
$dbTableName=JRequest:：getVar（'dbTableName'，'post'，'string'）；
$dbTableColumns=JRequest:：getVar（'dbTableColumns'，''，'post'，'array'）；
如果（！empty（$dbTableName））{
$model=$this->getModel（）；
如果（！（$model->showSelectedReport（$dbTableName、$dbTableColumns、$rows、$pageNav、$lists）））{
如果（计数（$errors=$this->get（'errors'））{
JError:：raiseError（500，内爆（“
，$errors”）；
返回false；
}
}
回声'；
回声'；
回声'；
foreach（$dbTableColumns作为$dbTabColNames）
回显“”。JText:：(（$dbTabColNames）。“”；
回声'；
回声'；
回声'；
$k=0；
对于（$i=0，$n=count（$rows）；$i<$n；$i++）{
$row=&$rows[$i]；
回声'；
foreach（$rowVal作为$rowVal的行）{
回显“.$rowVal.”；
}
回声'；
$k=1-$k；
}
回声'；
回声'；
回声'；
foreach（$dbTableColumns作为$dbTabColNames）
回显“”。JText:：(（$dbTabColNames）。“”；
回声'；
回声'；
回声'；
}否则
echo“无法获取所选表信息”；
}

每当我在“过滤框”输入中输入字符时，动态表中没有响应，但默认表将被过滤。当我单击“过滤清除”按钮时，它将刷新整个页面并返回默认表

正如您看到我的上述代码，我已经尝试使用在和讨论的解决方案，但仍然无法工作

提前感谢您的帮助。

我解决了我的问题！：-）只是想与您分享我所做的一切，以防您遇到和我一样的问题

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");
                                    },

<

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

        });