Datatables plugin cannot execute - JSF dynamic tables

tronlives

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

allan

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 and tbody. It looks like you have a tbody, but not thead.

Could you confirm if that is the case, and if you are able to add in the thead element?

Thanks,
Allan

tronlives

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

allan

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 a tbody element is that correct. If so, what you could do, in Javascript is:

$('#datatable > tr').wrap( '<thead/>' ).appendTo( '#datatable' );
$('#datatable').DataTable();

So that will take any direct child tr of the table (i.e. not in a thead or tbody) and wrap it in a thead and then insert it back into the table.

The DataTable can then be correctly initialised.

Regards,
Allan

tronlives

Hallo Allen,
thank you, i was able to solve the problem with that Code:

var newPara = document.createElement( 'thead' );
    $('#datatable > tbody:first').wrapInner(newPara).children().unwrap();
    var table = $('#datatable').DataTable({paging: false});
    new $.fn.dataTable.FixedHeader(table);

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:

<table>
<tbody>
<tr>
<td style="background: none repeat scroll 0% 0% rgb(255, 255, 255);" title="Filter ändern / Suchen" id="tabFilterPanelIdHeader" class="selectedTabHeader" onclick="showTab('tabFilterPanelId')">
Filter
</td>
<td style="background: none repeat scroll 0% 0% rgb(212, 212, 212);" title="Ergebnisse / Details anzeigen" id="tabReportPanelIdHeader" class="unselectedTabHeader" onclick="showTab('tabReportPanelId')">
Ergebnis
</td>
</tr>
</tbody>
</table>

Here the invoked Javascript-function:

        function showTab(newTabID) {

            hideElement("tabFilterPanelId");
            hideElement("tabReportPanelId");
            updateTabHeader("tabFilterPanelIdHeader",false);
            updateTabHeader("tabReportPanelIdHeader",false);
            updateTabHeader(newTabID,true);
            showElement(newTabID);
            updateTabHeader(newTabID + 'Header',true);
        }

To solve it, i thought i can add a new java function invoked by onClick like:

function showFilterTab() {
        var table = $('#datatable').DataTable();
        table.destroy();
        showTab('tabFilterPanelId')
        }

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

tronlives

Sorry, the code of the two tabs is here:

    <td title="#{messages['tabFilterPanelIdHeaderTooltip']}" id="tabFilterPanelIdHeader" class="selectedTabHeader" onclick="showFilterTab()"><h:outputText value="#{messages['FilterTabLabel']}"/></td>
                        <td title="#{messages['tabReportPanelIdHeaderTooltip']}" id="tabReportPanelIdHeader" class="unselectedTabHeader" onclick="showTab('tabReportPanelId')"><h:outputText value="#{messages['ResultTabLabel']}"/></td>

Thanks for any help in advance.

tronlives

Here is the strange code that appeared in my other Search Tab Page:

<div class=" FixedHeader_Cloned fixedHeader FixedHeader_Header" style="position: absolute; top: 202px; left: 204px; z-index: 104; width: 7375px;">
<table style="margin: 0px; width: 7375px;" aria-describedby="datatable_info" role="grid" class="result-table dataTable no-footer" border="1">
<thead>
<tr role="row">
<th aria-label="#: activate to sort column ascending" aria-sort="ascending" style="width: 7px;" colspan="1" rowspan="1" aria-controls="datatable" tabindex="0" class="result-table-header sorting_asc">
#
</th>
<th aria-label="Entity: activate to sort column ascending" style="width: 35px;" colspan="1" rowspan="1" aria-controls="datatable" tabindex="0" class="result-table-header sorting">
Entity
</th>

tronlives

Update:
I managed to remove the FixedHeader after clicking on a tab with that code:

function showFilterTab() {
        $ = jQuery;
        $(".FixedHeader_Cloned fixedHeader FixedHeader_Header").remove();
        showTab('tabFilterPanelId')
        }

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.

tronlives

Enlarge my profile picture to see a screenshot of that problem. The grey fixed header still reappears - whenever i use the window browser scrollbar.

allan

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() or fnDisable() methods as you require based on the state of the tabs. For example you could have something like:

var filterTable = $('#filter_table').DataTable();
var filterFH = new $.fn.dataTable.FixedHeader( table );

function showFilterTab() {
        filterFH.fnEnable();
}

function hideFilterTab() {
        filterFH.fnDisable();
}

The latest FixedHeader with these changes is available here:

• http://datatables.net/download/build/dataTables.fixedHeader.nightly.js?_=2.1.3-dev

Regards,
Allan

tronlives

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.

tronlives

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

allan

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

tronlives

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

allan

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

tronlives

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