I am using jQuery TableSorter Filter for my Report Component at Joomla Framework.
我在Joomla Framework的报表组件中使用了jQuery TableSorter Filter。
I manage creating dynamic tables built by calling AJAX based on user database table selection. The TableSorter features such as sorting and pager work very well, but the Filter only works on the default table that is built whenever page loading, NOT on the dynamic tables built by AJAX.
我管理创建通过基于用户数据库表选择调用AJAX构建的动态表。 TableSorter的功能如排序和分页器工作得很好,但Filter只适用于在加载页面时构建的默认表,而不是由AJAX构建的动态表。
Here they are my excerpt codes:
在这里,他们是我的摘录代码:
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>
At my component controller file to build the dynamic table is as follow:
在我的组件控制器文件中构建动态表如下:
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>';
}
Whenever I put character(s) into the "filter-box" input, there is no response at the dynamic table, but the default table will be filtered. When I click the button "filter-clear-button", it will refresh the whole page and go back to the default table.
每当我将字符放入“filter-box”输入时,动态表都没有响应,但默认表将被过滤。当我单击“filter-clear-button”按钮时,它将刷新整个页面并返回默认表。
As you can see my above codes, I have tried to use solutions discussed at this subject and also this discussion , but it still cannot work.
正如你可以看到我的上述代码,我试图使用在这个主题和讨论中讨论的解决方案,但它仍然无法工作。
Thank you in advance for your kind help.
提前感谢您的帮助。
1 个解决方案
#1
0
I solved my problem! :-) Just to share with you all what I have done, in case you encounter same problem like me.
我解决了我的问题! :-)只是为了与大家分享我所做的一切,以防你遇到像我这样的问题。
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");
},
changed to:
$.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");
},
and at my Component controller.php I do not need to return the "table" HTML tag anymore. Therefore I remarked following code lines:
并在我的组件controller.php我不再需要返回“表”HTML标签。因此我评论了以下代码行:
// echo '<table id="tblReportMain" class="tablesorter">';
// echo '</table>';
and I also add JQuery event for button "filter-clear-button" is as follow:
我还为按钮“filter-clear-button”添加了JQuery事件如下:
$('#filter-clear-button').live('click', function() {
if ((typeof selectedDBTable == 'undefined') || selectedDBTable == 'None') {
return true;
} else {
$('#buttonGenerateReport').click();
return false;
}
});
#1
0
I solved my problem! :-) Just to share with you all what I have done, in case you encounter same problem like me.
我解决了我的问题! :-)只是为了与大家分享我所做的一切,以防你遇到像我这样的问题。
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");
},
changed to:
$.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");
},
and at my Component controller.php I do not need to return the "table" HTML tag anymore. Therefore I remarked following code lines:
并在我的组件controller.php我不再需要返回“表”HTML标签。因此我评论了以下代码行:
// echo '<table id="tblReportMain" class="tablesorter">';
// echo '</table>';
and I also add JQuery event for button "filter-clear-button" is as follow:
我还为按钮“filter-clear-button”添加了JQuery事件如下:
$('#filter-clear-button').live('click', function() {
if ((typeof selectedDBTable == 'undefined') || selectedDBTable == 'None') {
return true;
} else {
$('#buttonGenerateReport').click();
return false;
}
});