day76

昨日回顾:
　　1 ajax 什么是ajax:异步的JavaScript 和xml
　　2 特点:异步,局部刷新
　　3 简单的与后台交互:(携带数据:可以拼到url上---->从GET中取,)
  　　$.ajax({
   　　　　url:请求的地址,
  　　　　 type:请求方式,(post,get....)
   　　　　//contentType:'application/json',(默认:urlencoded)
   　　　　data:{},往后台发送的数据
   　　　　success:function (data){
    　　　　//data的数据类型,不一定
    　　　　//异步的,成功返回,才能回调
   　　　　}
   })
  -携带数据:
    　　-可以拼到url上---->从GET中取
    　　-默认urlencoded编码和formdata,放到data中的数据,------>POST

今日内容:

　　分页器:
  　　　　-干啥的?数据量大的话,可以分页获取,查看
  　　基本写法:
   　　　　后端:
    　　　　　　-总数据拿出来
    　　　　　　-生成分页器Paginator对象(对象里有属性和方法)
    　　　　　　-生成当前页的对象,current_page=paginator.page(当前页码)
    　　　　　　-取出前台传过来的页码,current_page_num = int(request.GET.get('page'))
     　　　　　　-需要有异常捕获
     　　　　　　-捕获到,把当前页码设置成第一页

def manypage(request):
    try:
        page = int(request.GET.get('p'))
        books = models.Book.objects.all()
        paginator = Paginator(books, 10)
        current_page = paginator.page(page)
        if paginator.num_pages > 11:
            if page - 5 < 1:
                page_range = range(1, 12)
            elif page + 5 > paginator.num_pages:
                page_range = range(paginator.num_pages - 10, paginator.num_pages + 1)
            else:
                page_range = range(page - 5, page + 6)
        else:
            page_range = paginator.page_range
    except Exception as e:
        page = 1
        current_page = paginator.page(page)
        page_range = range(1, 12)
    return render(request, 'manypage.html', locals())

View Code

前端:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <script src="/static/jquery-3.3.1.js"></script>
    <link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>
<body>

<div class="col-md-offset-3 col-md-6">
    <table class="table table-striped">
        <thead>
        <tr>
            <th>书名</th>
            <th>价格</th>
        </tr>
        </thead>
        <tbody>
        {% for book in current_page %}
            <tr>
                <td>{{ book.name }}</td>
                <td>{{ book.price }}</td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
    <nav aria-label="Page navigation">
        <ul class="pagination">
            {% if current_page.has_previous %}
                <li>
                    <a href="?p={{ current_page.previous_page_number }}" aria-label="Previous">
                        <span aria-hidden="true">上一页</span>
                    </a>
                </li>
            {% else %}
                <li class="disabled">
                    <a href="#" aria-label="Previous">
                        <span aria-hidden="true">上一页</span>
                    </a>
                </li>
            {% endif %}
            {% for num in page_range %}
                {% if num == page %}
                    <li class="active"><a href="?p={{ num }}">{{ num }}</a></li>
                {% else %}
                    <li><a href="?p={{ num }}">{{ num }}</a></li>
                {% endif %}
            {% endfor %}
            {% if current_page.has_next %}
                <li>
                    <a href="?p={{ current_page.next_page_number }}" aria-label="Next">
                        <span aria-hidden="true">下一页</span>
                    </a>
                </li>
            {% else %}
                <li class="disabled">
                    <a href="#" aria-label="Next">
                        <span aria-hidden="true">下一页</span>
                    </a>
                </li>
            {% endif %}
        </ul>
    </nav>
</div>
</body>
</html>

View Code

批量插入输入:
　　-models.Book.objects.bulk_create(ll)