JQuery - TableSorter 和 Pager 在 CFDIV/DIV 中不起作用

Question

感谢您花时间调查我的问题。基本上，我有一个 Coldfusion 搜索页面，其中包含一个在 DIV 中显示搜索结果的表单。提交表单后，div 的内容将使用来自 srch_results.cfm 的新结果进行刷新。我无法让 tablesorter 和 pager 功能在 DIV 或 CFDIV 中工作（在 srch_results.cfm 上）。这是我的代码：

HOME.cfm

<cfoutput>  
<link rel="stylesheet" href="#request.relative_path#scripts/jquery.tablesorter/style.css" type="text/css" />  
<script type="text/javascript" src="#request.relative_path#scripts/jquery-1.6.2.min.js"></script>  
<script type="text/javascript" src="#request.relative_path#scripts/jquery.tablesorter/jquery.tablesorter.js"></script>  
<script type="text/javascript" src="#request.relative_path#scripts/jquery.tablesorter/addons/pager/jquery.tablesorter.pager.js">    </script>  
</cfoutput>
<script type="text/javascript">  
        $(document).ready(function() {  
                $("#srch_results #tableOne").tablesorter({ debug: false, sortList: [[0, 0]], widgets: ['zebra'] })  
                        .tablesorterPager({ container: $("#srch_results #pagerTwo"), positionFixed: false })  
            $("#srch_results #tableOne .header").click(function() {  
                    $("#srch_results #tableOne tfoot .first").click();  
            });                  
        });      

    </script>  
<cfoutput>    

<cfajaximport tags="cfform,cfdiv">    

<script>  
    function doSrch() {  
        ColdFusion.Ajax.submitForm('goSrch', '#request.relative_path#index.cfm?action=save_srch', callback, errorHandler);  
    }  

    function callback(text)  
    {  
         ColdFusion.navigate("#request.relative_path#index.cfm?action=srch_results", "srch_results");  
    }  

     function errorHandler(code, msg)  
    {  
         alert("Error!!! " + code + ": " + msg);  
    }  
</script>  



<fieldset>  
<legend>Search</legend>  

<cfform action="#request.relative_path#index.cfm?action=home" method="post" name="goSrch">  
<table align="center" cellpadding="2" cellspacing="3">  
<tr>  
    <th>Customer Name</th>    
    <th>Customer Number (MCN)</th>  
    <th>Type</th>  
    <th>Status</th>  
    <th>Begin Date</th>  
    <th>End Date</th>  
    <th>&nbsp;</th>  
</tr>  
<tr>  
    <td><cfinput type="text" name="customer_nm" value=""></td>  
    <td><cfinput type="text" name="customer_mcn" value=""></td>  
    <td>
    <select name="rec_type">
        <option value="">All</option>
        <option value="999">Advanced Features</option>
        <option value="186">Megacom</option>
        <option value="131">Readyline</option>
    </select>
    </td>  
    <td>  
    <select name="rec_status">
        <option value="">All</option>
        <option value="COMPLETE">COMPLETE</option>
        <option value="FAIL">FAIL</option>
        <option value="PENDING">PENDING</option>
    </select>
    </td>  
    <td><cfinput type="datefield" name="begin_date" value=""></td>  
    <td><cfinput type="datefield" name="end_date" value=""></td>  
     <td><a href="javascript:void(0);" onclick="doSrch();">Search</a></td>  
</tr>     
</table>  
</cfform>  

<!---<div id="srch_results"></div>--->  
<cfdiv id="srch_results" bind="url:#request.relative_path#index.cfm?action=srch_results" bindonload="true" />  

</cfoutput>  
</fieldset>

srch_results.cfm -------------------------------------------------- ------------

<cfset getSrchResults = request.getData.getSrchResults(form_args=form_args)>

<table cellspacing="1" id="tableOne" class="tablesorter">   
<thead>  
<tr>  
    <th><a href="javascript:void(0);" title="Click Header to Sort">Status</a></th>  
    <th><a href="javascript:void(0);" title="Click Header to Sort">Customer Name</a></th>  
    <th><a href="javascript:void(0);" title="Click Header to Sort">MCN</a></th>  
    <th><a href="javascript:void(0);" title="Click Header to Sort">ISC</a></th>  
    <th><a href="javascript:void(0);" title="Click Header to Sort">ID</a></th>  
    <th><a href="javascript:void(0);" title="Click Header to Sort">Order Number</a></th>  
    <th><a href="javascript:void(0);" title="Click Header to Sort">TOO</a></th>  
    <th><a href="javascript:void(0);" title="Click Header to Sort">8YY</a></th>  
    <th><a href="javascript:void(0);" title="Click Header to Sort">TN CUS</a></th>  
    <th><a href="javascript:void(0);" title="Click Header to Sort">CD</a></th>  
    <th><a href="javascript:void(0);" title="Click Header to Sort">SLS</a></th>  
    <th><a href="javascript:void(0);" title="Click Header to Sort">NCON</a></th>  
    <th><a href="javascript:void(0);" title="Click Header to Sort">SOA</a></th>  
    <th><a href="javascript:void(0);" title="Click Header to Sort">Message</a></th>  
</tr>  
</thead>  
<tbody>  
<cfoutput query="getSrchResults">  
<tr>  
    <td>#getSrchResults.col1#</td>  
    <td>#getSrchResults.col2#</td>  
    <td>#getSrchResults.col3#</td>  
    <td>#getSrchResults.col4#</td>  
    <td>#getSrchResults.col5#</td>  
    <td>#getSrchResults.col6#</td>  
    <td>#getSrchResults.col7#</td>  
    <td>#getSrchResults.col8#</td>  
    <td>#getSrchResults.col9#</td>  
    <td>#getSrchResults.col10#</td>  
    <td>#getSrchResults.col11#</td>  
    <td>#getSrchResults.col12#</td>  
    <td>#getSrchResults.col13#</td>  
    <td>#getSrchResults.col14#</td>  
</tr>  
</cfoutput>  
</tbody>  
<cfoutput>  
<tfoot>  
    <tr id="pagerTwo">  
        <td colspan="14">  
            <img src="#request.relative_path#img/first.png" class="first"/>  
            <img src="#request.relative_path#img/prev.png" class="prev"/>  
            <input type="text" class="pagedisplay"/>  
            <img src="#request.relative_path#img/next.png" class="next"/>  
            <img src="#request.relative_path#img/last.png" class="last"/>  
            <select class="pagesize">  
                <option selected="selected"  value="10">10</option>  
                <option value="20">20</option>  
                <option value="30">30</option>  
                <option  value="40">40</option>  
            </select>  
        </td>  
    </tr>  
</tfoot>  
</cfoutput>  
</table>

表格排序器和分页器功能在 div/cfdiv 之外可以正常工作。是否应该在 div/cfdiv 中（即在 srch_results.cfm 中）执行/重新执行某些操作以使排序和分页正常工作？

Answer 1

如果我没记错的话，您将需要重新运行您在文档中执行的绑定。AJAX 运行后准备就绪，因此您需要将该代码移动到回调函数中，因为该表不存在在 document.ready 中，它会在回调函数运行后存在。