Question

I have a problem with JQuery applying on JSF datatable.

I have my code like this:

<script type="text/javascript" charset="utf-8">
            $(document).ready(function() {
                $('<b>#example</b>').dataTable( {
                    "aoColumns": [
                        { "asSorting": [ "asc" ] },
                        { "asSorting": [ "asc" ] },
                        { "asSorting": [ "desc", "asc", "asc" ] },
                        { "asSorting": [ "desc" ] },
                        { "asSorting": [ "asc" ] },
                        { "asSorting": [ "asc" ] }
                    ]
                } );
            } );
        </script>

XHTML

<h:dataTable id="example" name="example" value="#{notificationBean.notificationList}" var="item"
                cellpadding="0" cellspacing="0" border="0"
                styleClass="display"
                rowClasses="gradeC"
                style="background-image: url('../images/ClientCare_Menu_Gradient.jpg'); background-repeat: repeat-x;">

When it renders:

<table id="searchform:example" class="display" cellspacing="0" cellpadding="0" border="0" style="background-image: url('../images/ClientCare_Menu_Gradient.jpg'); background-repeat: repeat-x;">

Now my problem is The CSS which has to apply for the datatable is not getting applied.

I tried different notations still it didnt work
in Jquery i tried:

${‘#searchform:example’}, ${‘#searchform.example’}
In these cases the Hover action on the containing table itself will not work to display the datatable.

${‘searchform#example’}, ${‘#example’}
In these cases the hover action works and datatable is rendered but CSS is not applying

Can anyone help in this ??

Thanks in advance
Deepak

Answer 1

You need to select the client ID of the generated HTML <table> element, not by the component ID of the JSF <h:dataTable> component. The HTML ID is in your particular case searchform:example. Since : is an illegal character in CSS selectors, you need to escape it:

$("#searchform\\:example")

or use the attribute selector instead:

$("[id='searchform:example']")

Easier would be to give the <h:dataTable> a style class instead.

<h:dataTable styleClass="example">

In your particular case, you already have one

<h:dataTable styleClass="display">

So you can also just use

$(".display")