JQuery - TableSorter и Pager не работают в CFDIV / DIV - PullRequest
0 голосов
/ 12 августа 2011

Спасибо, что нашли время изучить мою проблему. По сути, у меня есть страница поиска Coldfusion, содержащая форму, которая отображает результаты поиска в DIV. Когда форма отправлена, содержимое div обновляется новыми результатами из srch_results.cfm. Я не могу заставить функционирование таблиц и пейджеров работать в 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), чтобы заставить работать сортировку и разбиение на страницы?

1 Ответ

0 голосов
/ 12 августа 2011

Если моя память мне не изменяет, вам нужно будет повторно выполнить привязки, которые вы делаете в своем документе. Уже после запуска AJAX вы захотите перенести этот код в функцию обратного вызова, поскольку таблица не существуетв document.ready вместо этого он будет существовать после запуска функции обратного вызова.

...