Как получить следующие страницы в нагрузке больше 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>

У меня есть попытка, но кнопка рендеринга всех до нажатия загрузить еще

после нажатия загрузить еще

как это исправить?

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>