paginator.html文件
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Django分页系统</title> <!-- 最新版本的 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> </head> <body> <div class="container "> <div class="form-horizontal form-group jumbotron"> <a href="" class="btn btn-default">HOME</a> <a href="{% url 'b_add' %}" class="btn btn-primary">ADD</a> <a href="{% url 'b_delete' 0 %}" class="btn btn-success">DELETE</a> <a href="{% url 'b_modify' 0 %}" class="btn btn-info">MODIFY</a> <a href="{% url 'b_query' %}" class="btn btn-warning">QUERY</a> <a href="{% url 'index' %}" class="btn btn-danger">README</a> </div> {# 渲染数据到网页 #} <table class="table table-striped table-hover"> <thead> <tr> <th>序号</th> <th>书名</th> <th>价格</th> <th>出版时间</th> <th>出版社</th> <th>作者</th> <th>操作</th> </tr> </thead> <tbody> {% for book_obj in current_page %} <tr> <td>{{ forloop.counter }}</td> <td>{{ book_obj.title }}</td> <td>{{ book_obj.price }}</td> <td>{{ book_obj.pub_date|date:'Y-m-d' }}</td> <td>{{ book_obj.publish.name }}</td> <td> {% for author in book_obj.authors.all %} <span>{{ author.name }}</span> {% if not forloop.last %} , {% endif %} {% endfor %} </td> <td> <a class="btn btn-warning btn-sm" href="{% url 'b_modify' book_obj.pk %}">编辑</a> <button id="btn_del" class="btn btn-danger btn-sm" index={{ book_obj.nid }}>删除</button> </td> </tr> {% endfor %} </tbody> </table> <nav aria-label="Page navigation"> <ul class="pagination"> {# 上一页相关处理 #} {% if current_page.has_previous %} <li> <a href="?page={{ current_page.previous_page_number }}" aria-label="Previous"> <span aria-hidden="true">上一页</span> </a> </li> {% else %} <li class="disabled" title="亲,已经是第一页啦"><a href="">上一页</a></li> {% endif %} {# 数字按钮处理 #} {% for num in paginator.page_range %} {% if num == current_page_num %} <li class="active"><a href="?page={{ num }}">{{ num }}</a></li> {% else %} <li><a href="?page={{ num }}">{{ num }}</a></li> {% endif %} {% endfor %} {# 下一页相关处理 #} {% if current_page.has_next %} <li> <a href="?page={{ current_page.next_page_number }}" aria-label="Next"> <span aria-label="true">下一页</span> </a> </li> {% else %} <li class="disabled" title="亲,已经是最后一页啦"><a href="">下一页</a></li> {% endif %} </ul> </nav> {#底部返回首页#} <div style="width: 100px; height: 100px; background-color: orangered; color: white; text-align: center; line-height: 100px; position: absolute; right: 10px; bottom: 10px; "> <a href="{% url 'b_index' %}">返回首页</a> </div> {% csrf_token %} </div> <script src="/static/js/jquery.js"></script> <script> $(function () { $('#btn_del').click(function () { var b_delete_id = $(this).attr('index'); var url = '/book/b_delete/' + b_delete_id + '/'; var tag = $(this).parent().parent(); $.ajax({ url: url, type: 'get', success: function (response) { tag.children().html('').first().html(response).css('color', 'red') } }) }); }) </script> </body> </html>