Question

我有一个简单的表（包含用户数据），如下所示：

<div class="col-md-offset-1" id="userList" style="height:550px; width:80%; overflow:auto; margin-top:30px;">
    <table class="table table-bordered" id="userTable">
        <tr>
            <th scope="col" class="text-center">
                ID
            </th>
            <th scope="col" class="text-center">
                Name
            </th>
            <th scope="col" class="text-center"> Operation </th>
        </tr>

        <tbody>
            @RenderPage("_DataGridView.cshtml")
        </tbody>
    </table>
</div>

我的PartionView（＆＃34; _DataGridView.cshtml＆＃34;）如下所示：

@for (int i = 0; i < 10; i++)
{
    <tr>
        <td>
            @Model.FindingList[i].ID
        </td>
        <td>
            @Model.FindingList[i].Name
        </td>
        <td class="text-center">
            <button type="button" class="btn btn-primary" onclick="return ViewInfo('@Model.FindingList[i].ID', '@Model.FindingList[i].Name')"> Detail </button>
            <button type="button" class="btn btn-primary" onclick="return EditInfo('@Model.FindingList[i].ID', '@Model.FindingList[i].Name')"> Edit </button>
        </td>
    </tr>
}

我的Javascript文件如下所示：

$(document).ready(function () {

    var currentPageNumber = 1;
    var search = $('#s_name').val();

    var userTable = $('#userTable tbody');

    $('#userList').on('scroll', function () {
        if (Math.round($(this).scrollTop() + $(this).innerHeight(), 10) >= Math.round($(this)[0].scrollHeight, 10)) {
            currentPageNumber++;
            loadData(currentPageNumber);
        }
    })

    function loadData(currentPage) {
        $.ajax({
            url: 'http://localhost:62888/Training/Search',
            method: 'post',
            data: { name: search, pageNumber: currentPage, pageSize: 10 },
            dataType: 'json',
            success: function (data) {

                data = jQuery.unique(data);

                $(data).each(function (index, user) {

                    userTable.append('<tr>' +
                        '<td>' + user.ID + '</td>' +
                        '<td>' + user.Name + '</td>' +
                        '<td scope="col" class="text-center">' +
                              '<button type="button" class="btn btn-primary" onclick="return ViewInfo(\'' + user.ID + '\', \'' + user.Name + '\')">Detail</button>' +
                              '&nbsp &nbsp' +
                              '<button type="button" class="btn btn-primary" onclick="return EditInfo(\'' + user.ID + '\', \'' + user.Name + '\')">Edit</button>' +
                        '</td>' +
                     '</tr>')
                })

            }
        });
    }
});

网站会自动检测滚动滚动的时间是否以代码结束：

$('#userList').on('scroll', function () {
                if (Math.round($(this).scrollTop() + $(this).innerHeight(), 10) >= Math.round($(this)[0].scrollHeight, 10)) {
                    currentPageNumber++;
                    loadData(currentPageNumber);
                }
            })

向下滚动到最后。它将通过在loadData（）函数中调用ajax来加载数据。

所有数据将自动返回碎片。每件作品包含10张记录。这是服务器返回的一个部分：

＆＃34; [{\＆＃34; ID \＆＃34;：\＆＃34; 19 \＆＃34; \＆＃34;名称\＆＃34;：\＆＃34;营房奥巴马\＆＃34;}，{\＆＃34; ID \＆＃34;：\＆＃34; 2 \＆＃34; \＆＃34;名称\＆＃34;：\＆＃34; Nguyen Van 宝\＆＃34;}，{\＆＃34; ID \＆＃34;：\＆＃34; 20 \＆＃34; \＆＃34;名称\＆＃34;：\＆＃34;亚伯拉罕林肯\＆＃34;}，{\＆＃34; ID \＆＃34;：\＆＃34; 21 \＆＃34; \＆＃34;名称\＆＃34;：\＆＃34;托马斯 Edinson \＆＃34;}，{\＆＃34; ID \＆＃34;：\＆＃34; 22 \＆＃34; \＆＃34;名称\＆＃34;：\＆＃34;唐纳德王牌\＆＃34;}，{\＆＃34; ID \＆＃34;：\＆＃34; 23 \＆＃34; \＆＃34;名称\＆＃34;：\＆＃34;小田信长\＆＃34;}，{\＆＃34; ID \＆＃34;：\＆＃34; 24 \＆＃34; \＆＃34;名称\＆＃34;：\＆＃34;朱利叶斯凯撒\＆＃34;}，{\＆＃34; ID \＆＃34;：\＆＃34; 25 \＆＃34; \＆＃34;名称\＆＃34;：\＆＃34;乔治华盛顿\＆＃34;}，{\＆＃34; ID \＆＃34;：\＆＃34; 3 \＆＃34; \＆＃34;名称\＆＃34;：\＆＃34; Tran Thi CUC \＆＃34;}，{\＆＃34; ID \＆＃34;：\＆＃34; 4 \＆＃34; \＆＃34;名称\＆＃34;：\＆＃34; Pham Huynh E \＆＃34;}]＆＃34;

我的问题是当我向下滚动到栏的末尾时，重复附加 ajax返回结果。因此它在视图页面中变成了两部分数据（数据库中的所有数据都被复制了两次）。我的问题是：

它是如何发生的以及如何解决这个问题？

谢谢。

在jquery中重复追加

0 个答案: