Question

我有一个测试代码，至少部分工作，点击后使用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条记录，因为值是在 - data：{startrow：＆＃34; 10＆＃34;，endrow：＆＃34; 10＆＃34; ，在javascript中

虽然我可以使用服务器端代码轻松构建此类或任何类型的分页，但整个javascript让我感到困惑，并且不知道如何对其进行排序。我在cfc中尝试过，在数学上计算在cfloop中使用的startrow和endrow（我只是把startrow =＆＃34;＃arguments.startrow＃＆＃34; endrow =＆＃34; #argumentsendrow＃＆＃34 ;虽然这应该明显改变:)）它只返回前10条记录，因为startrow在javascript中设置为10。我在这里肯定缺少一些基本逻辑，非常感谢你对这一点的帮助。

Answer 1

如果要在客户端处理分页，则需要在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');
});

请注意我是如何更改网址以将搜索键/值移动到AJAX调用的data对象的。 jQuery会将对象解析为相同的urlencoded格式

您可以像在表单字段中startrow等效于name的任何表单元素一样接收这些值。您的查询语句也在查找所有条目

每次点击cfc，ajax，jquery加载10条记录

1 个答案: