如何让下一页加载更多django

Question

我使用带有按钮加载的ajax获取数据，如果它没有下一页，它将呈现“所有数据都已显示”

的index.html

<div class="panel-body">
    <div id="display-data">
        <span id="loading-help">Loading data. . .</span>
    </div>
</div>

<script>
  var page = 1
  $(document).ready(function(){
    $.get("{% url 'account:profile' %}?param=get_data&page="+page, 
    function(data){
        $("#display-data").append(data)
        $("#loading-help").remove()
        page++
    })
</script>

数据ajax.html

{% for data in datas %}
<div class="list-trx-data">
  <div class="row align-items-center">
    <div class="col-md-8">
        <div class="row align-items-center">
            <div class="col-md-4 col-sm-12 col-12 data-date"> 
            {{data.get_formatted_date}}</div>
            <div class="col-md-8 col-sm-12 col-12 data-name">
                <a href="#">{{data.get_data}}</a></div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="row align-items-center">
            <div class="col-md-6 col-8 data-amount"> 
            {{data.get_formatted_amount}}</div>
            <div class="col-md-6 col-4 ">
                <div class="data-progress">
                    <div class="pg-bar" style="width: 
                {{data.get_data.get_progress_str}}"></div>
                </div>
            </div>
        </div>
    </div>
  </div>
</div>
{% endfor %}
{% if datas.has_other_pages %}
  {% if datas.has_next %}
  <a href="javascript:void(0)" class="btn btn-ghost btn-block mt-2" 
  id="load-more-btn">Load More</a>
  {% else %}
  <a href="javascript:void(0)" class="btn btn-ghost btn-block mt-2" 
  id="load-more-btn">All data has been displayed</a>
  {% endif %}
{% endif %}
<script>
 $("#load-more-btn").click(function(){
        $.get("{% url 'account:profile' %}?param=get_data&page="+page, 
        function(data){
            $("#display-data").append(data)
            page++
        })
    })
</script>

我试了但是它渲染所有按钮before click load more

after click load more

怎么解决？

Answer 1

首先，不要将javascript放在data-ajax.html中。所有的javascript代码都应放在index.html中，其中需要实现所有逻辑。如果没有其他数据，则返回的data-ajax.html应为空。

数据ajax.html

{% for data in datas %}
<div class="list-trx-data">
  <div class="row align-items-center">
    <div class="col-md-8">
        <div class="row align-items-center">
            <div class="col-md-4 col-sm-12 col-12 data-date"> 
            {{data.get_formatted_date}}</div>
            <div class="col-md-8 col-sm-12 col-12 data-name">
                <a href="#">{{data.get_data}}</a></div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="row align-items-center">
            <div class="col-md-6 col-8 data-amount"> 
            {{data.get_formatted_amount}}</div>
            <div class="col-md-6 col-4 ">
                <div class="data-progress">
                    <div class="pg-bar" style="width: 
                {{data.get_data.get_progress_str}}"></div>
                </div>
            </div>
        </div>
    </div>
  </div>
</div>
{% endfor %}
{% if datas.has_other_pages %}
  {% if datas.has_next %}
  <a href="javascript:void(0)" class="btn btn-ghost btn-block mt-2" 
  id="load-more-btn">Load More</a>
{% endif %}

在你的index.html中，检查ajax调用是否返回任何内容，如果没有，则更改按钮文本，否则，删除按钮元素，因为你的data-ajax.html已经有基于{% if datas.has_other_pages %}的按钮。

的index.html

<div class="panel-body">
    <div id="display-data">
        <span id="loading-help">Loading data. . .</span>
    </div>
</div>

<script>
  $(document).ready(function(){
    var page = 1;  //page defined in $(document).ready()

    function getData(){
      $.get("{% url 'account:profile' %}?param=get_data&page="+page, function(data){
          $("#loading-help").remove();
          if (data){
            // data was received
            $("#loading-help").remove();
            $("#load-more-btn").remove();  # remove the load button if data is there.
            $("#display-data").append(data);
            page++;
          } else {
             $("#load-more-btn").text("All data has been displayed");  # else, change button text.
          }
        });
    }

    getData();  //Load data for the first time.
    $("#load-more-btn").click(function(){
        getData();  //Load data on button click.
    });

</script>