ajax - 如何在加载更多 django 时获取下一页

Question

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

索引.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>

我已经尝试过了，但是 在单击加载更多之前它会渲染所有按钮

点击后加载更多

如何解决？

标签： ajaxdjangopython-3.x

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 %}.

索引.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>