我在 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/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”按钮时，它将刷新整个页面并返回默认表。
正如你可以看到我上面的代码，我尝试使用在这个主题 和这个讨论中讨论的解决方案，但它仍然无法工作。
预先感谢您的帮助。