Question

我在页面滚动时使用加载。从这个链接 http://aspsnippets.com/Articles/Load-data-while-Scrolling-Page-down-with-jQuery-AJAX-and-ASPNet.aspx

在页面上加载它以表格的形式显示10条记录，我从数据库中绑定表格的唯一ID。正确地开始10行的绑定id，但是在第10行之后我看到{source code}，10th之后所有表上的Id都是相同的，它在第一个表上获取id。删除完成后，我使用此表唯一ID来删除表。我也在这个表中使用usercontrol。 Usercontrol的行为方式与table相同。在第10行之后，usercontrol重复第一个表的id。这是我的代码。

 <script type="text/javascript">

    var pageIndex = 1;
    var pageCount;
    $(window).scroll(function () {
        if ($(window).scrollTop() == $(document).height() - $(window).height()) {
            GetRecords();
        }
    }); 

    function GetRecords() {
        pageIndex++;
        if (pageIndex == 2 || pageIndex <= pageCount) {
            $("#loader").show();
            $.ajax({
                type: "POST",
                url: 'CS.aspx/GetCustomers',
                data: '{pageIndex: ' + pageIndex + '}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: OnSuccess,
                failure: function (response) {
                    alert(response.d);
                },
                error: function (response) {
                    alert(response.d);
                }
            });
        }
    }

    function OnSuccess(response) {
        var xmlDoc = $.parseXML(response.d);
        var xml = $(xmlDoc);
        pageCount = parseInt(xml.find("PageCount").eq(0).find("PageCount").text());
        var customers = xml.find("Customers");
        customers.each(function () {
            var customer = $(this);
            var table = $("#dvCustomers table").eq(0).clone(true);
            $(".name", table).html(customer.find("Title").text());
            $(".city", table).html(customer.find("Description").text());
            $(".postal", table).html(customer.find("UserID").text());
            $(".country", table).html(customer.find("EmailID").text());
            $(".phone", table).html(customer.find("Status").text());
            $(".fax", table).html(customer.find("UserID").text());
                 $(".MainCommentscont", table).html(customer.find("ID").text());
                   $(".MainComments", table).html(customer.find("ID").text());

            $("#dvCustomers").append(table).append("<br />");
        });
        $("#loader").hide();
    }

    </script>

我希望这个ID应该与table（在repeter内部）和usercontrol绑定，并且不应该在第10行之后重复。

 <form id="form1" runat="server">
    <table>
        <tr>
            <td>
                <div id="dvCustomers">
                    <asp:Repeater ID="rptCustomers" runat="server">
                        <ItemTemplate>
                            <table cellpadding="2" cellspacing="0" border="1" style="width: 200px; height: 100px;
                                border: dashed 2px #04AFEF; background-color: #B0E2F5" class="MainCommentscont" id='<%# Eval("ID")%>'>>
                                <tr>
                                    <td>

                                                <b><u><span class="name">
                                                    <%# Eval("Status")%></span></u></b>
                                                    </td>
                                          <td>
                                                <b>Desc: </b><span class="MainComments">
                                                    <%# Eval("ID")%></span><br />
                                                <b>Desc: </b><span class="city">
                                                    <%# Eval("Description")%></span><br />
                                                <b>User: </b><span class="postal">
                                                    <%# Eval("UserID")%></span><br />
                                                <b>Email: </b><span class="country">
                                                    <%# Eval("EmailID")%></span><br />
                                                <b>point: </b><span class="phone">
                                                    <%# Eval("Status")%></span><br />
                                                <b>Fax: </b><span class="fax">
                                                    <%# Eval("UserID")%></span><br />

                                    </td>
                                </tr>
                            </table>
                            <br />
                        </ItemTemplate>
                    </asp:Repeater>
                </div>
            </td>
            <td valign="bottom">
                <img id="loader" alt="" src="loading.gif" style="display: none" />
            </td>
        </tr>
    </table>
</form>

Answer 1

我认为问题是，克隆后你不要更改表ID。你能试试吗？

function OnSuccess(response) {
        var xmlDoc = $.parseXML(response.d);
        var xml = $(xmlDoc);
        pageCount = parseInt(xml.find("PageCount").eq(0).find("PageCount").text());
        var customers = xml.find("Customers");
        customers.each(function () {
            var customer = $(this);
            var table = $("#dvCustomers table").eq(0).clone(true);
            $(".name", table).html(customer.find("Title").text());
            $(".city", table).html(customer.find("Description").text());
            $(".postal", table).html(customer.find("UserID").text());
            $(".country", table).html(customer.find("EmailID").text());
            $(".phone", table).html(customer.find("Status").text());
            $(".fax", table).html(customer.find("UserID").text());
                 $(".MainCommentscont", table).html(customer.find("ID").text());
                   $(".MainComments", table).html(customer.find("ID").text());
//Change table ID
$(table).attr('ID',customer.find("ID").text());
//-
            $("#dvCustomers").append(table).append("<br />");
        });
        $("#loader").hide();
    }

通过jquery将数据绑定到表

1 个答案: