Access PageBlockTable Id in jQuery function

Question

I need to access the id of the pageBlockTable in jQuery to freeze column headers. I'm using plugins developed by others. They basically used HTML table, so referenced the table id directly in the jQuery.

My page outline:

<apex:form id="theform">
    <apex:pageBlock id="mainBlock" >
        <div class="outPane" id="outPane">
            <apex:pageBlockTable value="{!productDetails}" id="productDetails" var="productDetail" >

            </apex:pageBlockTable>
        </div> 
    </apex:pageBlock> 
</apex:form>

jQuery:

<script type="text/javascript">
        var table;
        $(document).ready( initializeDataTable());

        function initializeDataTable(){
            table = $('#productDetails').DataTable({
                scrollY:        "200px",
                scrollX:        true,
                scrollCollapse: true,
                paging:         false
            });
            new $.fn.dataTable.FixedColumns( table, {
                leftColumns: 0
            } ); 
        }
  </script>

Directly using '#productDetails' is not working. I know it should be something like 'theform.mainBlock.outPane.productDetails' but can't figure out the correct way.

Answer 1

You can go a couple different routes. The simplest is to use the ends with selector ($=):

$('[id$="productDetails"]').DataTable({...});

You can also reference it using the $Component global variable:

$('$Component.theForm.mainBlock.outPane.productDetails').DataTable({...});

---

The id you specify does not get added as a literal value. Have a read of Best Practices for Accessing Component IDs:

Best Practices for Accessing Component IDs To refer to a Visualforce component in JavaScript or another Web-enabled language, you must specify a value for the id attribute for that component. A DOM ID is constructed from a combination of the id attribute of the component and the id attributes of all components that contain the element.

Use the $Component global variable to simplify referencing the DOM ID that is generated for a Visualforce component, and reduce some of the dependency on the overall page structure. To reference a specific Visualforce component’s DOM ID, add a component path specifier to $Component, using dot notation to separate each level in the component hierarchy of the page. For example, use $Component.itemId to reference a component at the same level in the Visualforce component hierarchy, or use $Component.grandparentId.parentId.itemId to specify a more complete component path.

A $Component path specifier is matched against the component hierarchy:

• At the current level of the component hierarchy where $Component is used; and then
• At each successive higher level in the component hierarchy, until a match is found, or the top-level of the component hierarchy is reached.