Flask infinite scroll loading data fail

Question

I wrote a infinite scroll with jquery and flask, but Can't load all the data out. (I want to load 10 items from list "vocs" per time.)

jinja2:

<tbody id="xxx">
{% for _ in range(0,10) %}
    <tr>
        {% for i in vocs.pop(0) %}
            <td>{{ i }}</td>
        {% endfor %}
    </tr>
{% endfor %}
</tbody>

jquery:

<script>
    $(window).scroll(function () {
        if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) {
            var c = '';
            {% for _ in range(0,10) %}
                c += '<tr>';
                {% for i in vocs.pop(0) %}
                    c += ('<td>' + '{{ i }}' + '</td>');
                {% endfor %}
                c += '</tr>';
            {% endfor %}
            $('#xxx').append(c);
        }
    });
</script>

Each time when scroll to bottom, I got this result:

1~10

==> scroll to bottom

11~20

==> scroll to bottom

11~20

==> scroll to bottom

11~20

. . .

It seams that "vocs" pop out isn't in my anticipation. (It's weird that pop seams not working. Every time I trigger event, it still began from 11~20)

I know I must misunderstood something, but I don't know why.

EDIT 1：

Reclaim my question for more specific details. I got "vocs" from server at first, and it contains items from 1~100.

when I first scroll to bottom, it works well.

1~10

==> scroll to bottom

11~20

---

But when I scrool to bottom again, the scenario isn't in my anticipation.

==> scroll to bottom

11~20

I think I've got all the "vocs" I want at first time(it contains 1~100), and I don't need to get it again from client.

Answer 1

Jinja2: Templates seems correct. I checked the code with a simple range, it load properly for me when i scroll down. Perhaps you should check vocs. The issue should be with that.

<table>
    <tbody id="xxx">
    {% for _ in range(0,10) %}
        <tr> 
            {% for i in range(1,6) %}
                <td>{{ _ }} - {{ i }}<br/><br/><br/><br/><br/></td>
            {% endfor %}
        </tr>
    {% endfor %}
    </tbody>
</table>

JQuery:

<script>
    $(window).scroll(function () {
        if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) {
            var c = '';
            {% for _ in range(0,10) %}
                c += '<tr>';
                {% for i in range(1,6) %}
                    c += ('<td>' + '{{ _ }}{{ i }}' + '</td>');
                {% endfor %}
                c += '</tr>';
            {% endfor %}
            $('#xxx').append(c);
        }
    });
</script>