VF页面块中的表未显示

Question

我已经在我的vf页面中包含了表短脚本，但是它似乎没有做任何事情。不幸的是，我对jquery没有太多的经验。

我希望能够按订单编号列以及日期和发货#列进行排序。

    <apex:page controller="IntegratedOrdersReportController" docType="html-5.0">
    <apex:includeScript value="/support/console/26.0/integration.js"/>
    <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"/>
    <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"/>
    <apex:includeScript value="{!URLFOR($Resource.tablesorter, 'jquery.tablesorter.min.js')}"/>

    <script type="text/javascript">
        $j = jQuery.noConflict();    
        $j(document).ready(function () {
        $j("[id$=orderTable]").tablesorter();
        });    
    </script>

<apex:pageBlock title="Integrated Orders Report">
<div align="right">
    <apex:outputLink value="{!$Page.IntegratedOrdersExcelExport}" >Export Details
    <apex:param name="startDate"
    value="{!startDate}"
    assignTo="{!startDate}"/>

    <apex:param name="endDate"
    value="{!endDate}"
    assignTo="{!endDate}"/>
    </apex:outputLink>
</div> 

<apex:form >
    <pageBlockSectionItem>
        <apex:outputLabel value="Start Date: "/>
        <apex:input type="date" value="{!startDate}" label="Start Date: "/>
    </pageBlockSectionItem>
    <pageBlockSectionItem>
        <apex:outputLabel value="End Date: "/>
        <apex:input type="date" value="{!endDate}" label="End Date: "/>
    </pageBlockSectionItem>

    <apex:commandButton value="Compute" action="{!reactToCommandButton}" status = "status" reRender="orderTable" />  
        <apex:inputCheckbox value="{!toFilter}" label="Filter Results?"/>
        <apex:outputText value="Filter Results?" />
    <apex:outputText value="Note: Orders shipped late by Navision are included in this list." />
</apex:form>

    <c:WorkingWheel />

    <apex:pageBlockTable value="{!mergedOrders}" var="order" id="orderTable" styleClass="tablesorter" headerClass="header">

        <apex:column> 
            <apex:facet name="header">
                <apex:outputText styleClass="header" value = "{!$ObjectType.IntegratedReports_Order__c.Fields.Order_Number__c.Label}"/>
            </apex:facet>
            <apex:outputText value="{!order.Order_Number__c}"/>
        </apex:column>

        <apex:column value="{!order.Channel__c}"                    headerValue="Channel"/>
        <apex:column styleClass="header" headerValue="INIDS" > <apex:outputText value="{!order.Order_Number__c}"/></apex:column>
        <apex:column styleClass="header" headerValue="INSFDC"> <apex:outputText value="{!order.NavisionOrderNumber__c}"/>  </apex:column>

        <apex:column styleClass="header" value="{!order.Shipped_Quantity__c}"           headerValue="# Shipped IDS"/>
        <apex:column styleClass="header" value="{!order.NavisionShipQuantity__c}"       headerValue="# Shipped SFDC"/>
        <apex:column styleClass="header" value="{!order.Shipped_Date__c}"               headerValue="Shipped Date IDS"/>
        <apex:column styleClass="header" value="{!order.NavisionOrderDate__c}"          headerValue="Shipped Date SFDC"/>
        <apex:column value="{!order.Carrier__c}"                    headerValue="Carrier"/>
        <apex:column value="{!order.Tracking_Number__c}"            headerValue="Tracking No."/>
    </apex:pageBlockTable> 


</apex:pageBlock> 

</apex:page>

Answer 1

jQuery以“选择器”结尾

你有$j("[id$=orderTable]").tablesorter();，

我认为它应该在文本对匹配位：$j("[id$='orderTable']").tablesorter();中引用。

或者更好的-get消除visualforce生成的问题rid，并通过班级属性进行匹配：

$j("table.tableSorter").tablesorter();

您还可以在浏览器中打开JavaScript控制台(Ctrl+Shitft+J在chrome中，Ctrl+Shift+I在Firefox中，F12在IE中.)并查找语法错误(可能在某个地方缺少分号)。如果没有问题-在控制台中一点一点地进行实验，例如输入jQuery('table')并检查发生了什么，那么jQuery('table.tablesorter').