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>

上面的代码有效，但只显示前 10 条记录，因为值是在 javascript 中手动设置的 - data: { startrow: "10", endrow: "10" }

虽然我可以仅使用服务器端代码轻松构建此页面或任何类型的分页，但整个 javascript 在这里让我感到困惑并且不知道如何对其进行排序。我在 cfc 中尝试过什么，以数学方式计算要在 cfloop 中使用的 startrow 和 endrow（目前我只是把 startrow="#arguments.startrow#" endrow="#argumentsendrow#" 虽然这应该明显改变:)）它返回只有前 10 条记录，因为 startrow 在 javascript 中设置为 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 回答