我在Joomla Framework中使用jQuery TableSorter Filter作为我的报表组件。
我管理创建通过基于用户数据库表选择调用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>';
}
每当我将字符放入“filter-box”输入时，动态表都没有响应，但默认表将被过滤。当我点击“filter-clear-button”按钮时，它将刷新整个页面并返回默认表。
正如您可以看到我的上述代码，我尝试使用this subject和this discussion中讨论的解决方案，但它仍然无效。
提前感谢您的帮助。
答案 0 :(得分：0)
我解决了我的问题！ :-)只是为了与你分享我所做的一切，以防你遇到像我一样的问题。
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");
},
并在我的Component controller.php中，我不再需要返回“table”HTML标记了。因此，我评论了以下代码行：
// echo '<table id="tblReportMain" class="tablesorter">';
// echo '</table>';
我还为按钮“filter-clear-button”添加了JQuery事件如下：
$('#filter-clear-button').live('click', function() {
if ((typeof selectedDBTable == 'undefined') || selectedDBTable == 'None') {
return true;
} else {
$('#buttonGenerateReport').click();
return false;
}
});