对javascript中的ajax滚动内容进行排序

Sorting on ajax scrolling content in javascript

本文关键字：排序 滚动 javascript 中的 ajax      更新时间：2023-09-26

我有大约1000条记录，我想在div中显示。我以20条为一组显示它们，当你滚动到底部加载下20条记录。我正在对范围属性上的记录进行排序，但是当我在ajax调用的成功函数中滚动并加载新的20条记录时，div的排序条件不适用于这些div。

这些新记录以串行顺序显示，而不进行排序。我能够对当前页面中的记录进行排序，但如果您排序然后滚动到底部并加载新记录-这些记录在滚动时不会排序。

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Insert title here</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
    </script>
    </head>
    <body>
    <div id="container">
    <div class="content" data-name="Peter" data-price="1000" data-location="US"><span class="productPriceForSorting">1000</span</div><br />
    <div class="content" data-name="Willy" data-price="1200" data-location="Mexico"><span class="productPriceForSorting">1200</span</div><br />
    <div class="content" data-name="Peter" data-price="2000" data-location="US"><span class="productPriceForSorting">2000</span</div><br />
    <div class="content" data-name="Willy" data-price="800" data-location="Mexico"><span class="productPriceForSorting">800</span</div><br />
    <div class="content" data-name="Willy" data-price="1300" data-location="Mexico"><span class="productPriceForSorting">1300</span</div><br />
    <div class="content" data-name="Peter" data-price="800" data-location="US"><span class="productPriceForSorting">800</span</div><br />
    </div>
</div>
<div id="prod"></div>
    <button id="asc">sort by price asd</button>
下面是我的ajax滚动记录 
<script type="text/javascript">
$(document).ready(function() {
    var page=1;
     <%String name1=(String)session.getAttribute("name");%> 
    var name2="<%=name1%>";
    $(window).scroll(function(e) 
            {if ($(window).scrollTop()+ $(window).height() == $(document).height()) 
            {page++;

            $.ajax({    type : "Get",
                        url : "Someservlet",                        
                        datatype : "JSON",
                        contentType : 'application/json',
                        data : {pagenumber : page,
                        Pname : name2},
                        success : function(data) {
                            var data1 = data[0],
                            var len = data1.length;
                            for (var i = 0; i < len; i++) {
                                        var name = "<div class=content data-name=" + data1[i].name + '' + " data-location=" + data1[i].location + ">"
                                        + "Peter" +"</div>"+"<div class=content data-name=" + data1[i].name + '' + " data-location=" + data1[i].location + ">"
                                        + "Willy" +"</div>";
                                $(name).appendTo("#prod");
                            }
                    }
               });
        }
    });
});
</script>

下面是对

排序的代码
<script type="text/javascript">
        function sortByPrice(a, b) {
            return $(a).find('.productPriceForSorting').text() > $(b).find(
                    '.productPriceForSorting').text();
        }
        function reorderEl1(el) {
            var container = $('#container');
            container.html('');
            el.each(function() {
                $(this).appendTo(container);
            });
        }
        $(document).ready('#asc').click(function() {
            reorderEl1($('.content').sort(sortByPrice));
        });
        </script>

请帮助我的家伙，如何排序滚动元素一旦排序被点击?

您的AJAX调用生成的记录如下:

var name = "<div class=content data-name=" + data1[i].name + '' + " data-location=" + data1[i].location + ">"
         + "Peter" +"</div>"+"<div class=content data-name=" + data1[i].name + '' + " data-location=" + data1[i].location + ">"
         + "Willy" +"</div>";

但是你的排序函数正在寻找不是由AJAX添加的.productPriceForSorting元素。这就是你需要改变的。排序函数没有检测到.productPriceForSorting，所以没有比较。

你的排序函数也没有正确比较，它应该是:

function sortByPrice(a, b) {
            return parseInt($(a).find('.productPriceForSorting').text()) > parseInt($(b).find('.productPriceForSorting').text());
        }

下面是固定排序的工作演示。Ajax是为您准备的。它一定含有<span class='"productPriceForSorting'">"+data1[i].price+"</span>或类似的东西。

相关文章：