Datatables plugin cannot execute - JSF dynamic tables
Datatables plugin cannot execute - JSF dynamic tables
here is my debugger code: oicixek
Hi,
i am a developer consultant for a large automobile company and i have to apply fix table headers to our result tables. unfortunately, it does not work with in one case.
when i try to use your plugin with a JSF component, i receive in Firebug a error for the following code snippet in your plugin:
$.each( _fnGetRowElements( oSettings, rowOne[0] ).cells, function (i, cell) {
var col = oSettings.aoColumns[i];
--> if ( col.mData === i ) {
it sates "col" is undefined.
This is my relevant XHTML code:
<components:datatable id="dynamicReportTableID" name="statistic_report."
showRowHeader="true"
sortable="true"
selectable="true"
reportDataValue="#{Reporter.reportResult}"
reportInfo="#{Reporter.currentReportInfo}"
sortAction="#{Reporter.sortColumnListenerAction}"
cellSelectAction="#{Reporter.cellSelectAction}">
</components:datatable>
</f:subview>
<h:outputScript>
$ = jQuery;
// Then you can use it
$(window).ready(function() {
if(jQuery().DataTable()) {
$('#datatable').css('color', 'green');
var table = $('#datatable').delay(800).DataTable();
new $.fn.dataTable.FixedHeader(table);
}
});
here a snippet from my generated html-sourcecode:
<table border="1" class="result-table" id="datatable">
<tr>
<th class="result-table-header">#</th>
<th class="result-table-header">Entity</th>
<th class="result-table-header">
</tr>
and and a snippet of the body
<tbody>
<tr id="0" class="result-table-odd-row">
<td>1
<input type="checkbox" name="row:1" value="1" />
</td>
<td onclick="markRow(this.parentElement)">VPO</td>
<td
i believe that it your plugin does not find any columns.... i don`t know how to solve this..
Please help me.
Best Regards,
Benjamin
Answers
Hi Benjamin,
I believe that the problem is that your table's HTML doesn't include a
thead
.DataTables requires that you have a fully marked up up table, including a
thead
andtbody
. It looks like you have atbody
, but notthead
.Could you confirm if that is the case, and if you are able to add in the
thead
element?Thanks,
Allan
Hello Allan,
Yes that is correct there are only <th> Tags but no <thead>.
But the JSF Component generates automatically the Table from the source code.
So i cannot change that in XHTML.
is there a way to wrap the <th> Tags with a <Thead> Tag ?
Maybe Jquery can do this via DOM manipulation, before DataTables can be applied.
or - If you know a way to use DataTables without <thead> - this would be preferred.
Best Regards,
Benjamin
Hi Benjamin,
DataTables requires the
thead
in order for it to be able to differentiate between the header and the body rows.Although there isn't a
thead
element, I see above that there is atbody
element is that correct. If so, what you could do, in Javascript is:So that will take any direct child
tr
of the table (i.e. not in athead
ortbody
) and wrap it in athead
and then insert it back into the table.The DataTable can then be correctly initialised.
Regards,
Allan
Hallo Allen,
thank you, i was able to solve the problem with that Code:
BUT: I noticed another big problem:
I am using tabs to switch between the Search Page and the Result Page (with my #datatable). If i click back to the Search Page, the FixedHeader is still displayed!
Like the table rows, the fixed header shall disappear with switching to the search page.
Here is the Code of the tabs:
Here the invoked Javascript-function:
To solve it, i thought i can add a new java function invoked by onClick like:
BUT it didn`t removed the fixed table header automatically.
What can i do ? i cannot leave it like that.
If you wish to get more information (Screenshot, Codepages, etc.), please send me your support email adress.
Best Regards,
Benjamin
Sorry, the code of the two tabs is here:
Thanks for any help in advance.
Here is the strange code that appeared in my other Search Tab Page:
Update:
I managed to remove the FixedHeader after clicking on a tab with that code:
Sadly, the FixedHeader appears again when i use the Browser scrollbar.
how i can get ride of this?
At mimimum, i would like to remove the appeared FixedHeader after using the Windows Scrollbar. Preferred is to stop that undesired behavior of the remaining fixedHeader.
Enlarge my profile picture to see a screenshot of that problem. The grey fixed header still reappears - whenever i use the window browser scrollbar.
Hi,
I've just updated FixedHeader to add two new methods that provide the ability to enable and disable the fixed elements. (If you are interested this is the commit).
To use, simply call the new
fnEnable()
orfnDisable()
methods as you require based on the state of the tabs. For example you could have something like:The latest FixedHeader with these changes is available here:
Regards,
Allan
Hello Allan,
i have tried your nightly build,
When i am doing this:
var filterFH = new $.fn.dataTable.FixedHeader( table );
i just receive an error message stating:
"TypeError:$.fn.dataTable.FixedHeader is not a constructor".
So i cannot use it.
Do you have an alternative how i can remove your "FixedHeader_Cloned fixedHeader FixedHeader_Header" via JQUERY or other way? i simply cannot remove it. There is no id. An id would be helpful.
Best Regards,
Benjamin
Hi Benjamin,
The cloned element doesn't have an ID as it shouldn't be required!
Regarding the error you are seeing - are you able to link me to the page you are having problems with?
This is a little example showing that FixedHeader should work: http://live.datatables.net/yevaguli/1/edit
Thanks,
Allan
Hello Allan, i cannot link it. It is a business software. I can just send you the problematic sites per mail if you want.
Regards,
Benjamin
Yes that would work and I'll try to recreate the issue from them. If you could e-mail them over to
allan
@datatables.net
.Thanks,
Allan
Hi Allan,
I now solved it. I simply destroy the current datatable and create a new one after click on the "result"-Tab.
Anyway, thanks for your tips and good support.
Best Regards,
Benjamin