0

クリック時に ajax 呼び出しを使用して、少なくとも部分的に cfc からデータを返すテスト コードがあります。

コードは次のとおりです。

<script type="text/javascript"> 
    $(document).ready(function(){
            $('#showteams').click(function() {
                $.ajax({
        url: "test.cfc?method=getAllTeams&returnformat=JSON",
        dataType: 'json',
        data: { startrow: "10", endrow: "10" },

        success:function(data) {
            $.each(data, function(i,team){

            $('#teamList').append('<li><a href="#">' + team[0] + '</a> this is the username ' + team[1] + ' ----- name --- ' + team[2] + '');
                    });

                }});
            });
            $('#teams').show();
            $('#teamList').fadeIn(1200);
            $(this).attr('disabled', 'disabled');
        });
</script>

および単純な cfc (最終的なものはより複雑になりますが、必要に応じて変更できるほど柔軟です)

<cfcomponent output="false">
     <cffunction name="getAllTeams" access="remote" output="false" returntype="any">
     <cfargument name="startrow" required="yes" type="any">
     <cfargument name="endrow" required="yes" type="any">
     <cfargument name="cat" required="no" type="any" hint="add later with the rest of the code">

        <cfquery name="qGetAllTeams" datasource="datasource">
            SELECT ID,NAME,LASTNAME
            FROM table
        </cfquery>

        <cfset one=arraynew(1)> 
        <cfset two=arraynew(1)> 
        <cfloop query="qGetAllTeams" startrow="#arguments.startrow#" endrow="#arguments.endrow#"> 
            <cfset one[1]=ID> 
            <cfset one[2]=NAME> 
            <cfset one[3]=LASTNAME> 
            <cfset ArrayAppend(two,#one#)>
        </cfloop> 

        <cfreturn two />

     </cffunction>
</cfcomponent>

上記のコードは機能しますが、値が - data: { startrow: "10", endrow: "10" }, in javascript 内で手動で設定されるため、最初の 10 レコードのみが表示されます。

サーバー側のコードのみを使用して、これまたは任意の種類のページングを簡単に構築できますが、JavaScript 全体がここで私を混乱させ、整理する方法がわかりません。cfloop で使用される startrow と endrow を数学的に計算するために、私が cfc で試したことはあります (現在、私はちょうど startrow="#arguments.startrow#" endrow="#argumentsendrow#" を入れましたが、これは明らかに変更する必要があります:)) 戻りますjavascript で startrow が 10 に設定されているため、最初の 10 レコードのみです。ここでいくつかの基本的なロジックが欠けていることは間違いありません。

4

1 に答える 1

0

ページングをクライアント側で処理する場合は、javascript で行の開始を追跡する必要があります。

$(document).ready(function() {
    var startRow=1;
    $('#showteams').click(function() {
       var endRow= startRow+9;

        $.ajax({
            url: "test.cfc",
            dataType: 'json',
            data: { 
                method : 'getAllTeams',
                returnformat : 'JSON',
                startrow: startRow,
                endrow: endRow
            },

            success: function(data) {
                /* increment startRow*/
                startRow +=10;
                $.each(data, function(i, team) {

                    $('#teamList').append('<li><a href="#">' + team[0] + '</a> this is the username ' + team[1] + ' ----- name --- ' + team[2] + '');
                });

            }
        });
    });
    $('#teams').show();
    $('#teamList').fadeIn(1200);
    $(this).attr('disabled', 'disabled');
});​​

URL を変更して、検索キー/値をdataAJAX 呼び出しのオブジェクトに移動したことに注意してください。jQuery は、オブジェクトを同じ urlencoded 形式に解析します。

これらの値は、フォーム フィールドのstartrowと同等のフォーム要素と同じように受け取ります。nameまた、クエリステートメントはすべてのエントリを検索しています

于 2012-10-21T13:59:19.130 に答える