【问题标题】:How to hide pagination with Javascript如何使用 Javascript 隐藏分页
【发布时间】:2021-02-08 09:08:48
【问题描述】:

如果搜索结果少于一页,我会尝试隐藏我的引导分页栏。

这是我的 home.html 分页:

<div class="pagination" id="paginationField">
            <nav aria-label="...">
                <ul class="pagination", id="pagination">
                    <li class="page-item {% if not prev_page_url %}disabled {% endif %} ">
                        <a class="page-link" href="{{ prev_page_url }}" tabindex="-1">Previous</a>
                    </li>
                    {% for n in page.paginator.page_range %}
                        {% if page.number == n %}
                            <li class="page-item active">
                                <a class="page-link" href="?page={{ n }}">{{ n }} <span class="sr-only">(current)</span></a>
                            </li>
                        {% elif n > page.number|add:-3  and n < page.number|add:3 %}
                            <li class="page-item">
                                <a class="page-link" href="?page={{ n }}">{{ n }}</a>
                            </li>
                        {% endif %}
                    {% endfor %}
                  
                  <li class="page-item {% if not next_page_url %}disabled {% endif %} ">
                    <a class="page-link" href="{{ next_page_url }}">Next</a>
                  </li>
                </ul>
            </nav>
        </div>

这是我的 js 文件:

function showHidePagination() {
if(document.getElementById('paginationField').length > 15) {
    document.getElementById('pagination').style.display='none';
} else {
    document.getElementById('pagination').style.display='block';
}

}

【问题讨论】:

    标签: javascript html django pagination


    【解决方案1】:

    可能需要检查 document.getElementById('paginationField').innerHTML.length 代替 document.getElementById('paginationField').length

    【讨论】:

      【解决方案2】:

      仅当计数大于 1 时才显示分页器

      使用

      {% if  page.paginator.count>1 %} 
      
           <div class="pagination" id="paginationField">
              <nav aria-label="...">
               .....
      
      {% endif %}
      

      【讨论】:

        猜你喜欢
        • 2017-01-26
        • 1970-01-01
        • 2016-12-20
        • 2016-07-08
        • 2012-12-22
        • 1970-01-01
        • 2015-09-06
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多