开发者

JQuery - TableSorter and Pager not working within a CFDIV/DIV

开发者 https://www.devze.com 2023-03-27 12:48 出处:网络
Thanks for taking the time to look into my issue. Basically I have a Coldfusion search page containing a form that displays the search results within a DIV. When the form is submitted the contents of

Thanks for taking the time to look into my issue. Basically I have a Coldfusion search page containing a form that displays the search results within a DIV. When the form is submitted the contents of the div are refreshed with the new results from srch_results.cfm. Im unable to get the tablesorter and pager functionality to work within a DIV or CFDIV (on the srch_results.cfm). Here is my code:

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>

The table sorter and pager functionality work fine outside of the div/cfdiv. Is there something that should be executed/reexecuted within the div/cfdiv (ie within srch_results.cfm) to get the sorting and paging to work?


If my memory serves me right you will need to re-run the bindings you are doing in your document.ready once the AJAX runs, so you will want to move that code into you callback function since the table won't exist at document.ready, instead it will exist after the callback function has run.

0

精彩评论

暂无评论...
验证码 换一张
取 消